react-critical-css
Extracts your critical CSS.
Installation
npm install react-critical-css
or
yarn add react-critical-css
Usage
// ...;; // <- // ... const styleRegistry = ; // create new style registry const appString = ; const criticalCSS = styleRegistry; // <- extract collected critical CSS
App component example:
;; // import 'withStyles'; // import your styles, `s` should contain a string with style rules (see example webpack config below) // ... { return <div>App component example</div> ; } // wrap App component with 'withStyles' sApp;
Example Webpack configuration for CSS files
// ... moduleexports = // ... module: // ... rules: // ... test: /\.css$/ loader: 'css-loader' // ... ;
API
StyleRegistry [Class]
Public API:
- registerStyles - adds styles into internal registry
- getCriticalCSS - returns critical stylesheets which has been registered through
registerStyles
previously
Usage
; // ... const styleRegistry = ; // .. styleRegistry; // <- register stylesheets // ... const criticalCSS = styleRegistry // <- retrieve critical CSS
CriticalCSSProvider [React Component]
Passes context with registerStyles function through the React tree.
Props
- registry - instance of StyleRegistry or other registry which supports the same API
withStyles [Decorator]
Returns HOC which registers passed stylesheets.
withStyles
Arguments of - styles - string with CSS
withStyles(styles)
Arguments of - Component - React Component
Usage
// ...;; // ... // ... sMyComponent;
or using decorators
// ...;; // ... @ // ... ;