diff --git a/README.md b/README.md index 78c0e0e..44dc55b 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,38 @@ +## 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" }) + } +```
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: