malpaux / react-typestyle-preset

A preset combining React-TypeStyle, React-TypeStyle-Inline and a couple of useful plugins

React-TypeStyle preset using both React-TypeStyle and React-TypeStyle-Inline

React-TypeStyle-Preset provides a ready to use React-TypeStyle + React-TypeStyle-Inline setup including inline-style-prefixer for autoprefixing.

Install

using yarn

yarn add react-typestyle-preset react-typestyle react-typestyle-inline

or npm

npm install --save react-typestyle-preset react-typestyle react-typestyle-inline

Usage

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

Example

TypeScript

import withStyles, { InjectedProps, InputSheet } from 'react-typestyle-preset';

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',
    }),
  };

  public static inlineStyles: InputSheet<Props> = (props) => ({
    root: {
      transform: `translate(${props.pos.x}px,${props.pos.y}px)`,
    },
  })

  public render() {
    const { classNames, name, styles } = this.props;
    return (
      <div className={classNames.root} style={styles.root}>
        <button className={classNames.button} style={styles.button}>{name}</button>
      </div>
    );
  }
}

export default withStyles<Props>(Component);

JavaScript

import withStyles from 'react-typestyle-preset';

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

  static inlineStyles = (props) => ({
    root: {
      transform: `translate(${props.pos.x}px,${props.pos.y}px)`,
    },
  })

  render() {
    const { classNames, name, styles } = this.props;
    return (
      <div className={classNames.root} style={styles.root}>
        <button className={classNames.button} style={styles.button}>{name}</button>
      </div>
    );
  }
}

export default withStyles(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-preset';

// 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:

yarn / npm install
npm run build

(Install dependencies & build the project.)

Linting

Execute TSLint

npm run lint

Try to automatically fix linting errors

npm run lint:fix

Testing

Execute Jest unit tests using

npm test

npm run test:coverage

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

Building

To build the project, execute

npm run build

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