- Notifications
You must be signed in to change notification settings - Fork2
Make React components easier and more maintainable by using inline style objects
License
blakeembrey/react-free-style
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React Free Style combinesFree Style withReact.js by managing the style of React components dynamically. Works with server-side rendering, where only styles of rendered components will print.
Check out why you should bedoing CSS in JS. This module exposes the API directly to React.js.
Even more improvements with React Free Style
- Modular React.js components
- Style debugging in development mode
- Fast renders with automatic style for rendered React components
- Supports universal/isomorphic applications
npm install react-free-style --saveimport{styled}from"react-free-style";constButton=styled("button",{backgroundColor:"red",});constApp=()=>{return<Buttoncss={{color:"blue"}}>Hello world!</Button>;};
/**@jsx jsx */import{jsx}from"react-free-style";constApp=()=>{return(<buttoncss={{color:"blue",backgroundColor:"red"}}> Hello world!</button>);};
import{css,useCss}from"react-free-style";// Creates "cached CSS":conststyle=css({color:"red"});// But you can also write `const style = { color: "red" }`.constButton=()=>{constclassName=useCss(style);return<buttonclassName={className}>Hello world!</button>;};
This is how thestyled andjsx work! Knowing how it works can help you when you need to extract the class name for integrating with an existing UI library usingclassName.
Every CSS method accepts:
- CSS-in-JS object
- String, i.e. a class name
- Cached CSS, created using the
css(...)method - Computed CSS, a function which accepts
Styleand returns a valid style - Array of the above
Components created usingstyled expose "cached CSS" on thestyle property.
constLargeButton=styled("button",[{fontSize:16,},Button.style,{marginBottom:8,},]);
A "computed CSS" function can be used to register and use@keyframes.
import{css}from"react-free-style";conststyle=css((Style)=>{constanimationName=Style.registerStyle({$global:true,"@keyframes &":styles,});return{ animationName};});
The most effective CSS themes I've seen useCSS variables to dynamically change styles.
// Register this CSS wherever you want the theme to apply, e.g. `:root`.consttheme={"--color":"red",};constButton=styled("button",{color:"var(--color)",});// Later on you can change the theme.conststyle=css({"--color":"blue",});
UseReact.Context to define a theme and custom components withcss props.
constThemeContext=React.createContext({color:"red",});constButton=()=>{consttheme=React.useContext(ThemeContext);return<buttoncss={{color:theme.color}}>Hello world!</button>;};
By default, CSS output is discarded (a "no op" useful for testing) because you may have different output requirements depending on the environment.
StyleSheetRenderer is an efficient CSS renderer for browsers.
import{StyleSheetRenderer,Context}from"react-free-style";// const renderer = new NoopRenderer();constrenderer=newStyleSheetRenderer();React.render(<Context.Providervalue={renderer}><App/></Context.Provider>,document.body);
MemoryRenderer collects all styles in-memory for output at a later time.
import{MemoryRenderer,Context}from"react-free-style";// const renderer = new NoopRenderer();constrenderer=newMemoryRenderer();constcontent=ReactDOM.renderToString(<Context.Providervalue={renderer}><App/></Context.Provider>,document.body);consthtml=`<!doctype html><html> <head>${renderer.toString()} </head> <body> <div>${content} </div> </body></html>`;
MIT license
About
Make React components easier and more maintainable by using inline style objects