From 8057a720d5d149613186ecf5f398b85e6d9d1d50 Mon Sep 17 00:00:00 2001 From: Mark Eibes Date: Thu, 1 Dec 2022 10:36:58 +0100 Subject: [PATCH] Add usage example (#AdventOfPureCode 1) --- README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) 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" }) + } +``` pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy