Nemo's Parental Misguidance

    react-with-styles-custom

    3.3.2 • Public • Published

    react-with-styles-custom Version Badge

    Build Status dependency status dev dependency status License Downloads

    npm badge

    Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.

    Interfaces

    Other resources

    How to use

    Create a module that exports an object with shared theme information like colors.

    export default {
      color: {
        primary: '#FF5A5F',
        secondary: '#00A699',
      },
    };

    Register your theme and interface. For example, if your theme is exported by MyTheme.js, and you want to use Aphrodite, you can set this up in your own withStyles.js file.

    import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
    import aphroditeInterface from 'react-with-styles-interface-aphrodite';
    import { css, withStyles } from 'react-with-styles';
     
    import MyTheme from './MyTheme';
     
    ThemedStyleSheet.registerTheme(MyTheme);
    ThemedStyleSheet.registerInterface(aphroditeInterface);
     
    export { css, withStyles, ThemedStyleSheet };

    It is convenient to pass through css and withStyles from react-with-styles here so that everywhere you use them you can be assured that the theme and interface have been registered. You could likely also set this up as an initializer that is added to the top of your bundles and then use react-with-styles directly in your components.

    In your component, from our withStyles.js file above, use withStyles() to define styles and css() to consume them.

    import React from 'react';
    import PropTypes from 'prop-types';
    import { css, withStyles } from './withStyles';
     
    function MyComponent({ styles }) {
      return (
        <div>
          <a
            href="/somewhere"
            {...css(styles.firstLink)}
          >
            A link to somewhere
          </a>
     
          {' '}
          and
          {' '}
     
          <a
            href="/somewhere-else"
            {...css(styles.secondLink)}
          >
            a link to somewhere else
          </a>
        </div>
      );
    }
     
    MyComponent.propTypes = {
      styles: PropTypes.object.isRequired,
    };
     
    export default withStyles(({ color }) => ({
      firstLink: {
        color: color.primary,
      },
     
      secondLink: {
        color: color.secondary,
      },
    }))(MyComponent);

    ThemedStyleSheet

    Registers themes and interfaces.

    ThemedStyleSheet.registerTheme(theme)

    Registers the theme. theme is an object with properties that you want to be made available when styling your components.

    import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
     
    ThemedStyleSheet.registerTheme({
      color: {
        primary: '#FF5A5F',
        secondary: '#00A699',
      },
    });

    ThemedStyleSheet.registerInterface(interface)

    Instructs react-with-styles how to process your styles.

    import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
    import aphroditeInterface from 'react-with-styles-interface-aphrodite';
     
    ThemedStyleSheet.registerInterface(aphroditeInterface);

    withStyles([ stylesThunk [, options ] ])

    This is a higher-order function that returns a higher-order component used to wrap React components to add styles using the theme. We use this to make themed styles easier to work with.

    stylesThunk will receive the theme as an argument, and it should return an object containing the styles for the component.

    The wrapped component will receive a styles prop containing the processed styles for this component and a theme prop with the theme object. Most of the time you will only need the styles prop. Reliance on the theme prop should be minimized.

    Example usage

    import React from 'react';
    import { css, withStyles } from './withStyles';
     
    function MyComponent({ styles }) {
      return (
        <div {...css(styles.container)}>
          Try to be a rainbow in someone's cloud.
        </div>
      );
    }
     
    export default withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
    }))(MyComponent);

    Or, as a decorator:

    import React from 'react';
    import { css, withStyles } from './withStyles';
     
    @withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
    }))
    export default function MyComponent({ styles }) {
      return (
        <div {...css(styles.container)}>
          Try to be a rainbow in someone's cloud.
        </div>
      );
    }

    Options

    pureComponent (default: false, React 15.3.0+)

    By default withStyles() will create a component that extends React.Component. If you want to apply the shouldComponentUpdate() optimization offered by React.PureComponent, you can set the pureComponent option to true. Note that React.PureComponent was introduced in React 15.3.0, so this will only work if you are using that version or later.

    stylesPropName (default: 'styles')

    By default, withStyles() will pass down the styles to the wrapped component in the styles prop, but the name of this prop can be customized by setting the stylesPropName option. This is useful if you already have a prop called styles and aren't able to change it.

    import React from 'react';
    import { css, withStyles } from './withStyles';
     
    function MyComponent({ withStylesStyles }) {
      return (
        <div {...css(withStylesStyles.container)}>
          Try to be a rainbow in someone's cloud.
        </div>
      );
    }
     
    export default withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
    }), { stylesPropName: 'withStylesStyles' })(MyComponent);

    themePropName (default 'theme')

    Likewise, the theme prop name can also be customized by setting the themePropName option.

    import React from 'react';
    import { css, withStyles } from './withStyles';
     
    function MyComponent({ styles, withStylesTheme }) {
      return (
        <div {...css(styles.container)}>
          <Background color={withStylesTheme.color.primary}>
            Try to be a rainbow in someone's cloud.
          </Background>
        </div>
      );
    }
     
    export default withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
    }), { themePropName: 'withStylesTheme' })(MyComponent);

    flushBefore (default: false)

    Some components depend on previous styles to be ready in the component tree when mounting (e.g. dimension calculations). Some interfaces add styles to the page asynchronously, which is an obstacle for this. So, we provide the option of flushing the buffered styles before the rendering cycle begins. It is up to the interface to define what this means.

    css(...styles)

    This function takes styles that were processed by withStyles(), plain objects, or arrays of these things. It returns an object with an opaque structure that must be spread into a JSX element.

    import React from 'react';
    import { css, withStyles } from './withStyles';
     
    function MyComponent({ bold, padding, styles }) {
      return (
        <div {...css(styles.container, { padding })}>
          Try to be a rainbow in{' '}
          <a
            href="/somewhere"
            {...css(styles.link, bold && styles.link_bold)}
          >
            someone's cloud
          </a>
        </div>
      );
    }
     
    export default withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
     
      link: {
        color: color.secondary,
      },
     
      link_bold: {
        fontWeight: 700,
      },
    }))(MyComponent);

    className and style props must not be used on the same elements as css().

    cssCustom(propName, ...styles)

    This function takes styles that were processed by withStyles(), plain objects, or arrays of these things. It returns an object with an opaque structure that must be spread into a JSX element.

    import React from 'react';
    import { cssCustom, withStyles } from './withStyles';
     
    function MyComponent({ bold, padding, styles }) {
      return (
        <MyCustomDiv {...cssCustom('styleDiv', styles.container, { padding })}>
          Try to be a rainbow in{' '}
          <MyCustomArchor
            href="/somewhere"
            {...cssCustom('styleArchor', styles.link, bold && styles.link_bold)}
          >
            someone's cloud
          </MyCustomArchor>
        </MyCustomDiv>
      );
    }
     
    export default withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
     
      link: {
        color: color.secondary,
      },
     
      link_bold: {
        fontWeight: 700,
      },
    }))(MyComponent);

    className and param (passed as prop in cssCustom props must not be used on the same elements as cssCustom().

    Examples

    With React Router's Link

    React Router's <Link/> and <IndexLink/> components accept activeClassName='...' and activeStyle={{...}} as props. As previously stated, css(...styles) must spread to JSX, so simply passing styles.thing or even css(styles.thing) directly will not work. In order to mimic activeClassName/activeStyles you can use React Router's withRouter() Higher Order Component to pass router as prop to your component and toggle styles based on router.isActive(pathOrLoc, indexOnly). This works because <Link /> passes down the generated className from css(..styles) down through to the final leaf.

    import React from 'react';
    import { withRouter, Link } from 'react-router';
    import { css, withStyles } from '../withStyles';
     
    function Nav({ router, styles }) {
      return (
        <div {...css(styles.container)}>
          <Link
            to="/"
            {...css(styles.link, router.isActive('/', true) && styles.link_bold)}
          >
            home
          </Link>
          <Link
            to="/somewhere"
            {...css(styles.link, router.isActive('/somewhere', true) && styles.link_bold)}
          >
            somewhere
          </Link>
        </div>
      );
    }
     
    export default withRouter(withStyles(({ color, unit }) => ({
      container: {
        color: color.primary,
        marginBottom: 2 * unit,
      },
     
      link: {
        color: color.primary,
      },
     
      link_bold: {
        fontWeight: 700,
      }
    }))(Nav));

    In the wild

    Organizations and projects using react-with-styles.

    Install

    npm i react-with-styles-custom

    DownloadsWeekly Downloads

    0

    Version

    3.3.2

    License

    MIT

    Unpacked Size

    60.8 kB

    Total Files

    21

    Last publish

    Collaborators

    • rafaellpa