An implementation of the React-TypeStyle API using 100% React inline styles
npm install react-typestyle-inline
React-TypeStyle-Inline provides a higher-order component to use the React-TypeStyle API to style your React components using 100% React inline styles.
using yarn
``shell`
yarn add react-typestyle-inline
or npm
`shell`
npm install --save react-typestyle-inline
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 }) => (
);
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/'.