https://github.com/jaredpalmer/emotion-jsxstyle
jsxstyle primitives powered by emotion
https://github.com/jaredpalmer/emotion-jsxstyle
css css-in-js emotion jsxstyle
Last synced: about 1 year ago
JSON representation
jsxstyle primitives powered by emotion
- Host: GitHub
- URL: https://github.com/jaredpalmer/emotion-jsxstyle
- Owner: jaredpalmer
- License: mit
- Created: 2017-11-07T16:26:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-25T18:14:57.000Z (about 8 years ago)
- Last Synced: 2024-12-10T15:13:30.447Z (over 1 year ago)
- Topics: css, css-in-js, emotion, jsxstyle
- Language: JavaScript
- Homepage: https://npm.im/emotion-jsxstyle
- Size: 271 KB
- Stars: 20
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# emotion jsxstyle
[jsxstyle](https://github.com/smyte/jsxstyle) primitives powered by [emotion](https://github.com/emotion-js/emotion)
```sh
npm i emotion react-emotion emotion-jsxstyle
```
## Usage
```jsx
import React from 'react'
import { Block, Row } from 'emotion-jsxstyle'
const App = () => (
Hello
Goodbye
)
```
## Component Primitives
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
## Props
- `component`: specify the underlying DOM element. Defaults to `div`
- `props`: If you need to pass props to the underlying component, you can pass them through a special `props` props (just like jsxstyle).
- `css`: If you prefer the glamor css object syntax instead of just props, you can pass styles to a `css` prop. Useful for media queries etc.
## Refs
Just pass refs to `props` prop.
```jsx
import React from 'react'
import { Col, Block } from 'emotion-jsxstyle'
class App extends React.Component {
render() {
return (
this.input = i,
defaultValue: 'Hello',
}}/>
)
}
}
```
### Author
- Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)
---
MIT License