React bindings for VStyle
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
examples
lib
.eslintrc
.gitignore
README.md
package.json

README.md

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 { createStylesRendererfrom 'vstyle';
importStylesRendererProviderfrom '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 { StyleSheetfrom 'vstyle';
import { withRenderStylesfrom '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 { createStylesRendererfrom 'vstyle';
importStylesRendererProvider, injectNativeComponentfrom '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 { StyleSheetfrom 'vstyle';
import { withRenderStylesfrom 'react-vstyle';

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

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