react-emotive v1.2.6

React Emotive

A wrapper for React of the 'Emotive' css-in-js library.

import {Styled, Css, Color} from 'react-emotive';

const MyComp = Styled.div(
    Css.Display.BLOCK,
    Css.Position.ABSOLUTE,
    Css.Height.px(200),
    Css.FontSize.px(50),
    props => [
        Css.Color.set(props.textColor),
        Css.BackgroundColor.set(props.bgcolor)
    ],
    mobile(
        Css.Color.BLACK,
        Css.BackgroundColor.RED
    ),
);

const OtherComp = (props) => (
    <MyComp textColor={Color.WHITE} bgColor={Color.BLUE}>
        Emotive is cool with React
    </MyComp>
);

Install

Install with Npm

npm install --save react-emotive

or Yarn

yarn add react-emotive

Index

• React Emotive - Install
• Usage - Styled components - Emotive - Props - Media Query - Nesting

Usage

Styled components

Use the Styled object to create custom styled React components.

Every HTML element is avaiable as a method

const BasedOnTable = Styled.table(
    ...
);

You can also extends another component using Styled.component method

const BasedOnComponent = Styled.component(OtherComponent
    ...
);

Emotive

Every emotive object is re-exported to be directly available from react-emotive.

For a complete guide to these objects, see Emotive User Guide

Props

You can easily create dynamic styled components based on component props:

const MyComp = Styled.div(
    Css.FontSize.px(15),
    
    // single line
    props => Css.Display.set(props.display),
    
    // multi-line
    props => [
        Css.BackgroundColor.set(props.bgColor),
        Css.Color.set(props.textColor)
    ]
);

Media Query

It is possible to create custom wrappers based on media queries. Properties specified inside them will be considered only when the corresponding conditions are satisfied.

import {Styled, Css, Media} from 'react-emotive';

const printer = Media('print');
const mobile = Media('(max-width: 576px)');

const MyComp = Styled.div(
    Css.Color.WHITE,
    Css.BackgroundColor.BLUE,
    printer(
        Css.BackgroundColor.WHITE
    ),
    mobile(
        Css.Color.BLACK,
        Css.BackgroundColor.RED
    )
);

Of corse, the Emotive's Query object is re-exported too. Use it to compose your media queries:

import {Styled, Css, Media, Query} from 'react-emotive';

const printer = Media(Query.PRINT);
const tablet = Media(Query.and(
    Query.MinWidth.px(577),
    Query.MaxWidth.px(992)
));

const MyComp = Styled.div(
    Css.Color.WHITE,
    Css.BackgroundColor.BLUE,
    printer(
        Css.BackgroundColor.WHITE
    ),
    tablet(
        Css.Color.GRAY,
        Css.BackgroundColor.GREEN
    )
);

Nesting

Yes, you can use nested media query wrappers, together with props based properties, with no limits.

const MyComp = Styled.div(
    Css.Color.WHITE,
    Css.BackgroundColor.BLUE,
    printer(
        Css.BackgroundColor.WHITE,
        props => Css.FontFamily.set(props.printerFont)
    ),
    mobile(
        Css.Color.GRAY,
        Css.BackgroundColor.GREEN,
        hover(
            Css.Color.BLUE,
        )
    ),
    props => [
        Css.FontSize.set(props.font),
        mobile(
            Css.FontSize.set(props.fontMobile)
        )
    ]
);