{"repo":"blakeembrey/react-free-style","free":true,"listed":false,"github":"https://github.com/blakeembrey/react-free-style","clone":"git clone https://github.com/blakeembrey/react-free-style.git","description":"Make React components easier and more maintainable by using inline style objects","language":"TypeScript","stars":140,"topics":["free-style","react-components","typescript","css","css-in-js","css-in-react"],"license":"MIT","category":"ui-components","readme_excerpt":"React Free Style [![NPM version][npm-image]][npm-url] [![NPM downloads][downloads-image]][downloads-url] [![Build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![Bundle size][bundlephobia-image]][bundlephobia-url] 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 Usage Styled JSX Imperative 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. Animations A \"computed CSS\" function can be used to register and use @keyframes . Themes CSS Variables The most effective CSS themes I've seen use CSS variables to dynamically change styles. ","default_branch":null,"files":null,"tree":[],"storefront":"/r/blakeembrey","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/blakeembrey/react-free-style/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}