/react-native-for-web-stylesheet

Reuse your React Native styles inside your React DOM application!

Primary LanguageJavaScriptMIT LicenseMIT

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 <style> 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 build

WARNING!

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