React inline styles implementation of React-TypeStyle


React-TypeStyle-Inline provides a higher-order component to use the React-TypeStyle API to style your React components using 100% React inline styles.

Install

using yarn
``shell
yarn add react-typestyle-inline
`

or npm
`shell
npm install --save react-typestyle-inline
`

Usage


Just add a static `styles` field to your React component and wrap it in the `withStyles` higher-order component. You can now access generated inline styles via `props.styles`.

$3

#### TypeScript
`typescript
import withStyles, { InjectedProps, InputSheet } from 'react-typestyle-inline';

interface Props {
name: string;
pos: { x: number, y: number };
theme: { color: string };
}

class Component extends React.PureComponent {
public static styles: InputSheet = {
button: {
background: 'transparent',
border: 'none',
},
root: (props) => ({
color: props.theme.color,
position: 'absolute',
transform: translate(${props.pos.x}px,${props.pos.y}px),
}),
};

public render() {
const { styles, name } = this.props;
return (


);
}
}

export default withStyles()(Component);
`

#### JavaScript
`javascript
import withStyles from 'react-typestyle-inline';

class Component extends React.PureComponent {
static styles = {
button: {
background: 'transparent',
border: 'none',
},
root: (props) => ({
color: props.theme.color,
position: 'absolute',
transform: translate(${props.pos.x}px,${props.pos.y}px),
}),
};

render() {
const { styles, name } = this.props;
return (


);
}
}

export default withStyles()(Component);
`

$3


#### TypeScript
`typescript
import withStyles, { InjectedProps, StyledStatelessComponent } from 'react-typestyle-inline';

interface Props {
name: string;
pos: { x: number, y: number };
theme: { color: string };
}

const Component: StyledStatelessComponent = ({ styles, name }) => (

{name}

);

Component.styles = {
button: {
background: 'transparent',
border: 'none',
},
root: (props) => ({
color: props.theme.color,
position: 'absolute',
transform: translate(${props.pos.x}px,${props.pos.y}px),
}),
};

export default withStyles()(Component);
`

#### JavaScript
`javascript
import withStyles from 'react-typestyle-inline';

const Component = ({ styles, name }) => (


);

Component.styles = {
button: {
background: 'transparent',
border: 'none',
},
root: (props) => ({
color: props.theme.color,
position: 'absolute',
transform: translate(${props.pos.x}px,${props.pos.y}px),
}),
};

export default withStyles()(Component);
`

$3

You can pass in general options and options specific to the wrapped component.

`javascript
withStyles(options)(Component, componentOptions)
`

#### `options`
- `plugins?: Array<(style: { [property: string]: any }, type: string, renderer: any, props?: { [key: string]: any }) => { [property: string]: any }>`
Plugins for further style transformations. The plugin API is compatible with most Fela plugins, e.g. `fela-plugin-prefixer`

- `shouldStylesUpdate: (props: Props, nextProps: Props) => boolean`
Used to check whether styles should to be rerendered. Defaults to a shallow comparison of next and current props

#### `componentOptions`
- `styles: InputSheet`
Alternative style sheet, overwrites `styles` field of wrapped component

$3

#### Dynamic Extend
If you are using dynamic styles (your stylesheet includes functions), TypeStyle's standard `extend` won't work for you.
If you want to compose dynamic styles, use React-TypeStyle's dynamic `extend` instead.

`javascript
import { extend } from 'react-typestyle-inline';

// Compose styles
const styles = extend(
({ background }) => ({ background }),
{ color: '#fff' },
() => ({}),
);

// Use them in the higher-order component
class Component extends React.PureComponent {
static styles = {
root: styles,
};

render() {/ ... /}
}
`

Developing

This is what you do after you have cloned the repository:

`shell
yarn / npm install
npm run build
`

(Install dependencies & build the project.)

$3

Execute TSLint

`shell
npm run lint
`

Try to automatically fix linting errors
`shell
npm run lint:fix
`

$3

Execute Jest unit tests using

`shell
npm test
`

Tests are defined in the same directory the module lives in. They are specified in '[module].test.js' files.

$3

To build the project, execute

`shell
npm run build
``

This saves the production ready code into 'dist/'.