Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsjonq/styled-view
✌️ UI Primitive for React, with CSS-in-JS support
https://github.com/itsjonq/styled-view
component css css-in-js emotion react reactjs styled styled-components styled-system view
Last synced: 1 day ago
JSON representation
✌️ UI Primitive for React, with CSS-in-JS support
- Host: GitHub
- URL: https://github.com/itsjonq/styled-view
- Owner: ItsJonQ
- License: mit
- Created: 2019-11-28T18:32:11.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T20:14:56.000Z (almost 2 years ago)
- Last Synced: 2024-11-10T02:40:48.366Z (5 days ago)
- Topics: component, css, css-in-js, emotion, react, reactjs, styled, styled-components, styled-system, view
- Language: JavaScript
- Homepage: https://codesandbox.io/s/styled-view-demo-fsg08
- Size: 3.32 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✌️ Styled View
[](https://travis-ci.org/ItsJonQ/styled-view)
[](https://coveralls.io/github/ItsJonQ/styled-view?branch=master)
[](https://bundlephobia.com/result?p=styled-view)
> UI Primitive for React, with CSS-in-JS support
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [`css` function](#css-function)
- [`css` prop](#css-prop)
- [`sx` prop](#sx-prop)
- [Mixins](#mixins)
- [Theming](#theming)
## Installation
```
npm install styled-view
```
## Usage
The `` component supports all of the default [CSSProperties](https://github.com/ItsJonQ/is-style-prop-valid/blob/master/src/CSSProperty.js#L47) as props. The styles transformed and handled by [Emotion](https://emotion.sh/docs/introduction).
```jsx
import React from 'react';
import { View } from 'styled-view';
function Example() {
return (
Hello
);
}
```
### `css` function
`css` is a utility function that works with the `` `css` prop. The API is similar to the [Emotion's css prop](https://emotion.sh/docs/css-prop#string-styles). Unlike the `css` prop, the [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) allows for functions, which is handy for mixins.
```jsx
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 (
Hello
);
}
```
### `css` prop
`` accepts a special `css` prop, which allows you to write styles, just like the [css prop](https://emotion.sh/docs/css-prop#string-styles) or [styled component](https://emotion.sh/docs/styled#styling-elements-and-components) from Emotion.
```jsx
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 (
Hello
);
}
```
### `sx` prop
`` accepts a special `sx` prop, which allows you to write style objects.
```jsx
import React from 'react';
import { View } from 'styled-view';
function Example() {
return Hello;
}
```
### Mixins
`` can render mixins (`function`) when passed into the `css` function. This enables integration with libraries like [Styled Systems](https://github.com/styled-system/styled-system). It also enable you to add your very own custom mixins!
```jsx
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 (
);
}
function Example() {
return (
Hello
);
}
```
This concepts was inspired by [James Newell](https://github.com/jameslnewell) ❤️!
### Theming
Theming `` works as specified by [Emotion Theming](https://emotion.sh/docs/theming).
```jsx
import React from 'react';
import { ThemeProvider } from 'emotion-theming';
import { View } from 'styled-view';
const theme = {
fontFamily: 'arial',
};
function Example() {
return (
Hello
);
}
```