React-typestyle-inline NPM

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

yarn add react-typestyle-inline

or npm

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.

Example

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<Props & InjectedProps> {
  public static styles: InputSheet<Props> = {
    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 (
      <div style={styles.root}>
        <button style={styles.button}>{name}</button>
      </div>
    );
  }
}

export default withStyles()<Props>(Component);

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 (
      <div style={styles.root}>
        <button style={styles.button}>{name}</button>
      </div>
    );
  }
}

export default withStyles()(Component);

Stateless Components

TypeScript

import withStyles, { InjectedProps, StyledStatelessComponent } from 'react-typestyle-inline';

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

const Component: StyledStatelessComponent<Props> = ({ styles, name }) => (
  <div style={styles.root}>
    <button style={styles.button}>{name}</button>
  </div>
);

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

JavaScript

import withStyles from 'react-typestyle-inline';

const Component = ({ styles, name }) => (
  <div style={styles.root}>
    <button style={styles.button}>{name}</button>
  </div>
);

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

Options

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

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
bashouldStylesUpdate: <Props>(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<Props>
Alternative style sheet, overwrites styles field of wrapped component

Utilities

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.

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() {/* ... */}
}