https://github.com/purescript-react/purescript-react-basic-emotion
https://github.com/purescript-react/purescript-react-basic-emotion
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/purescript-react/purescript-react-basic-emotion
- Owner: purescript-react
- Created: 2019-10-14T22:23:47.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T04:44:14.000Z (about 3 years ago)
- Last Synced: 2026-02-15T14:12:01.690Z (2 months ago)
- Language: PureScript
- Homepage: https://pursuit.purescript.org/packages/purescript-react-basic-emotion
- Size: 1.09 MB
- Stars: 17
- Watchers: 11
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-basic-emotion
[Emotion](https://emotion.sh/) support for [react-basic](https://github.com/lumihq/purescript-react-basic)!
[](https://github.com/lumihq/purescript-react-basic-emotion/actions/workflows/ci.yml)
## Example usage:
```purescript
import React.Basic.DOM as R
import React.Basic.Hooks as React
import React.Basic.Emotion as E
myUnstyledDiv :: JSX
myUnstyledDiv = React.element R.div'
{ children: [ R.text "I have no style :(" ]
}
myStyledDiv :: JSX
myStyledDiv = E.element R.div'
{ className: "stylish-div"
, css: E.css
{ color: E.str "rebeccapurple"
, padding: E.px 4
}
}
```
Note that you need to use the apostrophised variants of react components from `React.Basic.DOM` since these represent the raw `ReactComponent`s that `Emotion` expects to work with.
## Going beyond what `style` can give you
Emotion allows you to define real CSS rules rather than only inline styles.
Here's an example of something you can't do with inline styles:
```purescript
myStyle :: Style
myStyle = E.css
{ "&:hover": E.nested (E.css { background: E.str "#fed" })
}
```