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.

Emotive object	Content
Css	Property objects
Method	Methods
Length	Length and percentage units methods
Angle	Angle units methods
Time	Time units methods
Frequency	Frequency units methods
Resolution	Resolution units methods
Keyword	Keywords constants
Color	Colors constants
Unit	Units constants
Property	Properties name constants
Query	Media Queries

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)
        )
    ]
);