react-vstyle
React bindings for vstyle
Last updated 4 years ago by fdecampredon .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-vstyle 
SYNC missed versions from official npm registry.

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();

ReactDOM.render(
  <StylesRendererProvider stylesRenderer={stylesRenderer}>
    <MyComponent />
  </StylesRendererProvider>,
  docuent.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)

Navive 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();

ReactDOM.render(
  <StylesRendererProvider stylesRenderer={stylesRenderer}>
    <MyComponent />
  </StylesRendererProvider>,
  docuent.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]} />;
}

Current Tags

  • 0.1.0                                ...           latest (4 years ago)

1 Versions

  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 2
Dependencies (1)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |