✌️ Styled View

UI Primitive for React, with CSS-in-JS support

Table of contents

• Installation
• Usage
  • css function
  • css prop
  • sx prop
  • Mixins
  • Theming

Installation

npm install styled-view

Usage

The <View> component supports all of the default CSSProperties as props. The styles transformed and handled by Emotion.

import React from 'react';
import { View } from 'styled-view';

function Example() {
	return (
		<View backgroundColor="#eee" padding={20}>
			Hello
		</View>
	);
}

css function

css is a utility function that works with the <View /> css prop. The API is similar to the Emotion's css prop. Unlike the css prop, the tagged template literal allows for functions, which is handy for mixins.

import React from 'react';
import { css, View } from 'styled-view';

function Example() {
	const variant = ({ variant }) => {
		switch (variant) {
			case 'primary':
				return `
					background-color: blue;
					color: white;
			`;
			default:
				return `
				background-color: yellow;
			`;
		}
	};

	return (
		<View
			backgroundColor="#eee"
			padding={20}
			css={css`
				${variant};
				&:hover {
					transform: scale(1.2);
				}
			`}
		>
			Hello
		</View>
	);
}

css prop

<View /> accepts a special css prop, which allows you to write styles, just like the css prop or styled component from Emotion.

import React from 'react';
import { View } from 'styled-view';

function Example() {
	const css = `
		&:hover {
			background-color: blue;
			color: white;
		}

		@media (min-width: 768px) {
			padding: 40px;
		}
	`;

	return (
		<View backgroundColor="#eee" padding={20} css={css}>
			Hello
		</View>
	);
}

sx prop

<View /> accepts a special sx prop, which allows you to write style objects.

import React from 'react';
import { View } from 'styled-view';

function Example() {
	return <View sx={{ backgroundColor: 'pink', padding: 20 }}>Hello</View>;
}

Mixins

<View /> can render mixins (function) when passed into the css function. This enables integration with libraries like Styled Systems. It also enable you to add your very own custom mixins!

import React from 'react';
import { space, layout, typography, color } from 'styled-system';
import { css, View } from 'styled-view';

// Add styled-system functions to your component
function Box(props) {
	return (
		<View
			{...props}
			css={css`
				${space};
				${layout};
				${typography};
				${color};
			`}
		/>
	);
}

function Example() {
	return (
		<Box p={4} bg="#ddd" borderRadius={8}>
			Hello
		</Box>
	);
}

This concepts was inspired by James Newell ❤️!

Theming

Theming <View /> works as specified by Emotion Theming.

import React from 'react';
import { ThemeProvider } from 'emotion-theming';
import { View } from 'styled-view';

const theme = {
	fontFamily: 'arial',
};

function Example() {
	return (
		<ThemeProvider theme={theme}>
			<View>Hello</View>
		</ThemeProvider>
	);
}