react-typestyle-preset v0.3.2

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/'.