react-native-for-web-stylesheet v0.0.5
React Native for Web Stylesheet
Reuse your React Native styles inside your React DOM application!
How can i install this?
- Go into your project folder and install react-native-for-web-stylesheet
npm install react-native-for-web-stylesheet- Include in the header of your html file, or embed via your css compiler, the node_modules/react-native-for-web-stylesheet/base.css. This file contains the basic rules and properties that inline styles in JS may not support at the moment. (Just think about pointer events)
- Choose between:
1. Render the stylesheet to a tag using
renderToStyleNode. 2. Setup the babel and webpack plugins to export a separate CSS stylesheet file that can be cached by the client.
Building the library
Move into the package folder and run in your terminal:
npm run buildWARNING!
This package is in beta version! API may be changed during lifecycle!
Design goals
- Expose a compatible API with the React Native one, so you can reuse the StyleSheets over the web
- Provide a StyleSheet with event subscription, so we can subscribe to StyleSheet updates and re-render the stylesheet
Provide multiple render ways, renderToString on server and renderToStyleTag on the client
Allows dump and load of the internal storage, allowing to dump CSS to a separate stylesheet file, enabling CSS caching
Automatically translates React Native style properties in CSS properties
Expose a pluggable way to register methods that translates (classNameId, propertyName, value) => CSSRuleString
Is framework independent, exposing a function that given an array of styles and optional additional styles and classNameIds, returns the className and the style in a DOM fashion