react-free-style
    TypeScript icon, indicating that this package has built-in type declarations

    11.1.0 • Public • Published

    React Free Style

    NPM version NPM downloads Build status Test coverage Bundle size

    React Free Style combines Free Style with React.js by managing the style of React components dynamically. Works with server-side rendering, where only styles of rendered components will print.

    Why?

    Check out why you should be doing 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

    Installation

    npm install react-free-style --save
    

    Usage

    Styled

    import { styled } from "react-free-style";
    
    const Button = styled("button", {
      backgroundColor: "red",
    });
    
    const App = () => {
      return <Button css={{ color: "blue" }}>Hello world!</Button>;
    };

    JSX

    /** @jsx jsx */
    
    import { jsx } from "react-free-style";
    
    const App = () => {
      return (
        <button css={{ color: "blue", backgroundColor: "red" }}>
          Hello world!
        </button>
      );
    };

    Imperative

    import { css, useCss } from "react-free-style";
    
    // Creates "cached CSS":
    const style = css({ color: "red" });
    // But you can also write `const style = { color: "red" }`.
    
    const Button = () => {
      const className = useCss(style);
    
      return <button className={className}>Hello world!</button>;
    };

    This is how the styled and jsx work! Knowing how it works can help you when you need to extract the class name for integrating with an existing UI library using className.

    Recipes

    Valid Styles

    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 Style and returns a valid style
    • Array of the above

    Composition

    Components created using styled expose "cached CSS" on the style property.

    const LargeButton = styled("button", [
      {
        fontSize: 16,
      },
      Button.style,
      {
        marginBottom: 8,
      },
    ]);

    Animations

    A "computed CSS" function can be used to register and use @keyframes.

    import { css } from "react-free-style";
    
    const style = css((Style) => {
      const animationName = Style.registerStyle({
        $global: true,
        "@keyframes &": styles,
      });
    
      return { animationName };
    });

    Themes

    CSS Variables

    The most effective CSS themes I've seen use CSS variables to dynamically change styles.

    // Register this CSS wherever you want the theme to apply, e.g. `:root`.
    const theme = {
      "--color": "red",
    };
    
    const Button = styled("button", {
      color: "var(--color)",
    });
    
    // Later on you can change the theme.
    const style = css({
      "--color": "blue",
    });

    Context

    Use React.Context to define a theme and custom components with css props.

    const ThemeContext = React.createContext({
      color: "red",
    });
    
    const Button = () => {
      const theme = React.useContext(ThemeContext);
    
      return <button css={{ color: theme.color }}>Hello world!</button>;
    };

    Rendering

    By default, CSS output is discarded (a "no op" useful for testing) because you may have different output requirements depending on the environment.

    Client-side Rendering

    StyleSheetRenderer is an efficient CSS renderer for browsers.

    import { StyleSheetRenderer, Context } from "react-free-style";
    
    // const renderer = new NoopRenderer();
    const renderer = new StyleSheetRenderer();
    
    React.render(
      <Context.Provider value={renderer}>
        <App />
      </Context.Provider>,
      document.body
    );

    Server-side Rendering

    MemoryRenderer collects all styles in-memory for output at a later time.

    import { MemoryRenderer, Context } from "react-free-style";
    
    // const renderer = new NoopRenderer();
    const renderer = new MemoryRenderer();
    
    const content = ReactDOM.renderToString(
      <Context.Provider value={renderer}>
        <App />
      </Context.Provider>,
      document.body
    );
    
    const html = `
    <!doctype html>
    <html>
      <head>
        ${renderer.toString()}
      </head>
      <body>
        <div id="content">
          ${content}
        </div>
      </body>
    </html>
    `;

    License

    MIT license

    Install

    npm i react-free-style

    DownloadsWeekly Downloads

    223

    Version

    11.1.0

    License

    MIT

    Unpacked Size

    76.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • blakeembrey