react-with-styles-interface-amp-aphrodite

    2.2.1 • Public • Published

    react-with-styles-interface-amp-aphrodite Version Badge

    Build Status dependency status dev dependency status License Downloads

    npm badge

    Interface to use react-with-styles with Aphrodite and Amp.

    Import

    import ampAphroditeInterface from 'react-with-styles-interface-amp-aphrodite';

    or when you need to disable !important:

    import ampAphroditeInterface from 'react-with-styles-interface-amp-aphrodite/no-important';

    Amp Support

    If your app is being rendered with Amp, react-with-styles-interface-amp-aphrodite expects you to set process.env.AMP to 'true' at compile time. This can readily be accomplished by using the following option in your webpack config:

    {
      name: 'amp',
      plugins: [
        new webpack.DefinePlugin({
          'process.env.AMP': 'true',
        }),
      ],
    }
    

    Built-in RTL support

    react-with-styles-interface-amp-aphrodite has built-in LTR/RTL context support. Specifically, it uses rtl-css-js to automatically flip styles (margin, padding, float, textAlign, etc.) that were written for an LTR page when your app is wrapped in react-with-direction's DirectionProvider with direction set to DIRECTIONS.RTL.

    It accomplishes this by providing a directional create and resolve method. react-with-styles automatically uses the correct create method based on the direction value set in context and then passes down the appropriate resolve method as a prop named css.

    For instance, if you were to write your styles as follows:

    import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
    import ampAphroditeInterface from 'react-with-styles-interface-amp-aphrodite';
    import { withStyles, css } from 'react-with-styles';
     
    ThemedStyleSheet.registerTheme({});
    ThemedStyleSheet.registerInterface(ampAphroditeInterface);
     
    ...
    mp-a
    function MyComponent({ css }) {
      return <div {...css(styles.container)}>Hello World</div>;
    }
     
    export default withStyles(() => ({
      container: {
        background: '#fff',
        float: 'left',
      },
    }))(MyComponent);

    The generated css for an app where you set <DirectionProvider direction={DIRECTIONS.LTR}> at the top would look like:

    .container_r5r4of {
      background: #fff !important;
      float: 'left' !important;
    }

    whereas if you had set <DirectionProvider direction={DIRECTIONS.RTL}>, the generated css would be:

    .container_kui6s4 {
      background: #fff !important;
      float: 'right' !important;
    }

    If you used an inline style instead:

    import { css } from 'react-with-styles';
     
    export default function MyComponent() {
      return <div {...css({ background: '#fff', float: 'left' })}>Hello World</div>;
    }

    In the case where <DirectionProvider direction={DIRECTIONS.LTR}> is wrapping your component, this would map to a style={{ background: '#fff', float: 'left' }} on the div in question. If <DirectionProvider direction={DIRECTIONS.RTL}> is present instead, this would simply apply style={{ background: '#fff', float: 'right' }} to the div.

    Install

    npm i react-with-styles-interface-amp-aphrodite

    DownloadsWeekly Downloads

    49

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    35.7 kB

    Total Files

    25

    Last publish

    Collaborators

    • noratarano
    • etienne_tripier
    • lencioni
    • airbnbeng
    • ljharb
    • majapw