!libreact logo

freestyler

[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]

5^th generation [React styling library][npm-url] —
it is lightning fast, lean, and with gazillion __features__.

``
Yeah, straight from the top of my dome
As I rock, rock, rock, rock, rock the microphone
Yeah, straight from the top of my dome
As I rock, rock, rock, rock, rock the microphone...
`

- Bomfunk MC's — Freestyler




feat.

- fifth generation, lightweight, lightning fast, JIT CSS, code splitting, dead code elimination, JavaScript variables

!Typing and autocompletion

CSS Templates

- __Scoped__ styles without selectors
- __Nested__ selectors
- __Mixins__
- __Atoms__
- __Media queries__, keyframes, ...
- __Global__ styles
- Global entry and exit animations
- CSS __resets__
- __Theming__




Reference

- Terminology
- Generations
- Interfaces
- __Generic__ Low-level API
- __Generic__ __3rd Generation Interfaces__
- rule() Interface
- StyleSheet.create() Interface with lazy rendering
- hyperstyle() styleName Interface
- __React.js__ __4th Generation Interfaces__
- styled()() Component Interface
- @css Static Class Decorator Interface
- @css() Class Decorator Interface
- @css() .render() Decorator Interface
- Component Class Interface
- hoc()() Higher Order Component Interface
- __React.js__ __5th Generation Interfaces__
- styleit() and Interfaces
- jsxstyle(), , , , , and Interfaces
- Environment Variables
- Server-side Rendering
- How it Works?




Installation

npm i freestyler --save




Usage

`js
import {
css,
styled,
rule,
StyleSheet,
Component,
hoc,
jsxstyle
} from 'freestyler';

import hyperstyle from 'freestyler/lib/react/hyperstyle';
import {styleit, Styleit} from 'freestyler/lib/react/styleit';
`

Decorate stateful components.

`jsx
@css({
border: '1px solid tomato',
})
class App extends Component {
render () {
return

;
}
}
`

Or, create "styled" stateless components.

`jsx
const Bordered = styled.div({
border: '1px solid tomato',
});
const App = () =>
Hello world!;
``

License

Unlicense — public domain.

-------

[npm-url]: https://www.npmjs.com/package/freestyler
[npm-badge]: https://img.shields.io/npm/v/freestyler.svg
[travis-url]: https://travis-ci.org/streamich/freestyler
[travis-badge]: https://travis-ci.org/streamich/freestyler.svg?branch=master