Low-level API

As a React user you will never have to use these low-level APIs, you can safely skip to 3^rd+ generation interfaces. At the core of freestyler library is Renderer class, which is a framework agnostic CSS renderer that simply generates and injects CSS.

Here is how you can use the renderer, first import it.

import Renderer from 'freestyler/lib/renderer/Renderer';

Now, create your renderer instance and inject some CSS onto the page.

const renderer = new Renderer;

renderer.renderAnon({
  body: {
    background: 'tomato'
  }
});

That's it, now the background color of your page will be red. Read reference below for more.

Reference

• .format() — parses CSS-like object's AST and returns a raw CSS string.
• .renderAnon() — injects anonymous global CSS into the page.
• .renderStatic() — injects component's static CSS.
• .render() — injects instance's dynamic CSS.
• .unrender() — removes instance's dynamic CSS.

.format(styles[, selector])

Arguments

• styles — object of styles.
• selector — optional, selector string used to replace & references.

Example 1

renderer.format({
  a: {
    ta: 'center'
  },
  div: {
    textAlign: 'center'
  },
  span: {
    'text-align': 'center'
  }
});

Returns

a{text-align:center;}div{text-align:center;}span{text-align:center;}

Example 2

renderer.format({
  display: 'block',
  '& > a': {
    td: 'underline'
  }
}, '.my-class')

Returns

.my-class > a{text-decoration:underline;}.my-class{display:block;}

.renderAnon(styles)

Simply renders global styles.

Example

renderer.renderAnon({
  html: {
    col: 'red'
  }
});

Will inject into the page:

html{color:red}

.renderStatic(Comp, template[, args])

Renders static styles of some component; static styles are the ones that never change and will always stay the same for that component.

Note, that Comp component does not have to be a React component it can be any object that uniquely identifies some component.

Arguments:

• Comp — UI component.
• template — style object or a function that returns a style object.
• args — optional, array of arguments to provide to template if it is a function.

Returns a string containing a list of class names generated for that component.

Example

const tpl = () => ({
    border: '1px solid tomato'
});

const classNames = renderer.renderStatic(MyButton, tpl);

.render(Comp, instance, el, tpl, args)

Renders and re-renders dynamic styles of some component's instance. You can call this method every time that component's instance re-renders.

Arguments

• Comp — component type or a constructor of some component.
• instance — instance of that component.
• el — optional, root DOM element of that component.
• tpl — style object or a function that returns a style object.
• args — optional, array of arguments to provide to tpl if it is a function.

Comp can be any object that uniquely identifies some UI component, it does not necessarily have to be a React component.

instance is any object that uniquely identifies that component's rendered instance, it does not have to be a React component instance.

el is an optional (use null otherwise) root DOM node reference of the component's instance used for extra performance. If el is provided, renderer will try to use that node to apply inline styles when possible and set CSS Custom Properties directly on this node for performance, instead of setting global CSS variables.

Returns a string, which is a list of class names you should apply to the root element of your component's instance.

Example

let App, instance, tpl;

tpl = () => ({
    border: '1px solid tomato'
});

App = () => {
    const classNames = renderer.render(App, instance, null, tpl, []);
    return <div className={classNames}>Hello world!</div>
};

instance = ReactDOM.render(<App />, el);

The dynamic .render() method can be called every time your component re-renders, which allows your component's CSS to change with props or state of your component. The renderer will generate actual CSS, so you can use media queries and all the other CSS features.

.unrender(Comp, instance, el)

Removes dynamic styles created by .render() method. Call this method when your component instance un-mounts, for example, in React you would do that in .componentWillUnmount() life-cycle hook.

Arguments Comp, instance, and el have the same semantics as in the .render() method.