Gathering detailed insights and metrics for react-free-style
Gathering detailed insights and metrics for react-free-style
Make React components easier and more maintainable by using inline style objects
Installations
npm install react-free-styleDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
15.6.0
NPM Version
6.14.9
Score
70.3
Supply Chain
99.4
Quality
76.2
Maintenance
100
Vulnerability
100
License
Releases
56
Upgrade dependencies
v11.1.0
Updated on Jan 24, 2021
Handle `insertRule` errors
v11.0.1
Updated on Jun 07, 2020
Upgrade Free Style
v11.0.0
Updated on May 02, 2020
Fix `styled` ref
v10.2.2
Updated on Apr 12, 2020
Allow multiple CSS values
v10.2.1
Updated on Mar 30, 2020
Recursive Computed CSS
v10.2.0
Updated on Mar 27, 2020
Languages
2
TypeScript
JavaScript
TypeScript (88.04%)
JavaScript (11.96%)
Developer
blakeembrey
Download Statistics
Total Downloads
74,643
Last Day
2
Last Week
23
Last Month
298
Last Year
6,352
GitHub Statistics
MIT License
138 Stars
254 Commits
2 Forks
3 Watchers
8 Branches
6 Contributors
Updated on Mar 30, 2025
Bundle Size
6.70 kB
Minified
2.45 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
11.1.0
Package Id
react-free-style@11.1.0
Unpacked Size
75.11 kB
Size
13.00 kB
File Count
18
NPM Version
6.14.9
Node Version
15.6.0
Total Downloads
Cumulative downloads
Total Downloads
74,643
Last Day
0%
2
Compared to previous day
Last Week
-86.2%
23
Compared to previous week
Last Month
-41.1%
298
Compared to previous month
Last Year
-35.2%
6,352
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
Dev Dependencies
24
@size-limit/preset-small-lib@types/jest@types/node@types/react@types/react-dom@types/react-test-rendererhtml-webpack-pluginhuskyjestlint-stagedprettierreactreact-domreact-test-rendererrimrafsize-limitts-jesttslinttslint-config-prettiertslint-config-standardtypescriptwebpackwebpack-cliwebpack-dev-server
React Free Style
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
1import { styled } from "react-free-style"; 2 3const Button = styled("button", { 4 backgroundColor: "red", 5}); 6 7const App = () => { 8 return <Button css={{ color: "blue" }}>Hello world!</Button>; 9};
JSX
1/** @jsx jsx */ 2 3import { jsx } from "react-free-style"; 4 5const App = () => { 6 return ( 7 <button css={{ color: "blue", backgroundColor: "red" }}> 8 Hello world! 9 </button> 10 ); 11};
Imperative
1import { css, useCss } from "react-free-style"; 2 3// Creates "cached CSS": 4const style = css({ color: "red" }); 5// But you can also write `const style = { color: "red" }`. 6 7const Button = () => { 8 const className = useCss(style); 9 10 return <button className={className}>Hello world!</button>; 11};
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
Styleand returns a valid style - Array of the above
Composition
Components created using styled expose "cached CSS" on the style property.
1const LargeButton = styled("button", [ 2 { 3 fontSize: 16, 4 }, 5 Button.style, 6 { 7 marginBottom: 8, 8 }, 9]);
Animations
A "computed CSS" function can be used to register and use @keyframes.
1import { css } from "react-free-style"; 2 3const style = css((Style) => { 4 const animationName = Style.registerStyle({ 5 $global: true, 6 "@keyframes &": styles, 7 }); 8 9 return { animationName }; 10});
Themes
CSS Variables
The most effective CSS themes I've seen use CSS variables to dynamically change styles.
1// Register this CSS wherever you want the theme to apply, e.g. `:root`. 2const theme = { 3 "--color": "red", 4}; 5 6const Button = styled("button", { 7 color: "var(--color)", 8}); 9 10// Later on you can change the theme. 11const style = css({ 12 "--color": "blue", 13});
Context
Use React.Context to define a theme and custom components with css props.
1const ThemeContext = React.createContext({ 2 color: "red", 3}); 4 5const Button = () => { 6 const theme = React.useContext(ThemeContext); 7 8 return <button css={{ color: theme.color }}>Hello world!</button>; 9};
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.
1import { StyleSheetRenderer, Context } from "react-free-style"; 2 3// const renderer = new NoopRenderer(); 4const renderer = new StyleSheetRenderer(); 5 6React.render( 7 <Context.Provider value={renderer}> 8 <App /> 9 </Context.Provider>, 10 document.body 11);
Server-side Rendering
MemoryRenderer collects all styles in-memory for output at a later time.
1import { MemoryRenderer, Context } from "react-free-style"; 2 3// const renderer = new NoopRenderer(); 4const renderer = new MemoryRenderer(); 5 6const content = ReactDOM.renderToString( 7 <Context.Provider value={renderer}> 8 <App /> 9 </Context.Provider>, 10 document.body 11); 12 13const html = ` 14<!doctype html> 15<html> 16 <head> 17 ${renderer.toString()} 18 </head> 19 <body> 20 <div id="content"> 21 ${content} 22 </div> 23 </body> 24</html> 25`;
License
MIT license
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
Reason
78 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.6
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More