Awesome

react-vstyle

React bindings for VStyle

Install

You can install react-vstyle through npm:

npm install react-vstyle

Usage

StylesRendererProvider

react-vstyle let you inject a VStyle StylesRenderer in the react context with the StylesRendererProvider component:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStylesRenderer } from 'vstyle';
import { StylesRendererProvider } from 'react-vstyle';
import MyComponent from './myComponent';

const stylesRenderer = createStylesRenderer();
stylesRenderer.attach(document.getElementById('style'));

ReactDOM.render(
  <StylesRendererProvider stylesRenderer={stylesRenderer}>
    <MyComponent />
  </StylesRendererProvider>,
  document.getElementById('root')
);

once you have injected your StylesRenderer into the context you can consume your styles in 2 ways :

withRenderStyles

withRenderStyles is an higher order component that will inject the renderStyles function of the StylesRenderer to the props of the wrapped component:

import React from 'react';
import { StyleSheet } from 'vstyle';
import { withRenderStyles } from 'react-vstyle';

const styles = StyleSheet.create({
  button: {
    color: 'blue',
  },
});

function MyComponent({ renderStyles, styles: otherStyles }) {
  return <Button className={renderStyles(styles.button, otherStyles)} />;
}

export default withRenderStyles(MyComponent)

Native component injection

Alternatively you can use the experimental injectNativeComponent function of react-vstyle, then you can drop your styles in the styles (notice the s) property of your DOM components:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStylesRenderer } from 'vstyle';
import { StylesRendererProvider, injectNativeComponent  } from 'react-vstyle';
import MyComponent from './myComponent';

injectNativeComponent();

const stylesRenderer = createStylesRenderer();
stylesRenderer.attach(document.getElementById('style'));

ReactDOM.render(
  <StylesRendererProvider stylesRenderer={stylesRenderer}>
    <MyComponent />
  </StylesRendererProvider>,
  document.getElementById('root')
);

import React from 'react';
import { StyleSheet } from 'vstyle';
import { withRenderStyles } from 'react-vstyle';

const styles = StyleSheet.create({
  button: {
    color: 'blue',
  },
});

export default function MyComponent({ styles: otherStyles }) {
  return <Button styles={[styles.button, otherStyles]} />;
}