Home

Awesome

CSS constructor for React

Ā 

Every React component gets an inbuilt javascript constructor for functional logic.

Introducing the css constructor for styling!

Ā  Ā 

import React from 'react';
import css from 'css-constructor';                  // šŸ‘¶ Super tiny: only 1.2K gzipped!

export default class Hello extends React.Component {

    /* javascript constructor */
    constructor (props) {
        super(props);
    }

    /* css constructor */                           
    @css`                                           // šŸ”’ Isolated and co-located
        font-size: 16px;                            
        text-align: center;                         // šŸŽ€ Supports the entirety of CSS

        color: {this.props.color};                  // šŸ”„ Use props in css

        display: flex;                              // šŸ’» Built in vendor prefixing

        &:hover {                                   // šŸŒ€ Pseudo selectors
            color: #FFF;
        }

        img {                                       // šŸ‘Ŗ Nested css
            border-radius: 50%;
        }
        #handle {
            margin-top: 20px;
        }

        @media (max-width: 600px) {                 // šŸ“± Media queries support
            & {font-size: 18px;}
        }
    `

    render () {
        return (<div>                               // šŸ”¼ Attaches class to the highest element
            <img src="https://github.com/siddharthkp.png"/>
            <div id="handle">@siddharthkp</div>
        </div>)
    }
};

// <Hello color='papayawhip'/>

--

Other features

šŸ™‹ Uses classes instead of inline styles

šŸ”§ Editable in developer tools

šŸ‘¶ Super tiny: only 1.2K gzipped!

šŸ’„ Official library emoji

Coming soon

šŸŒ server side rendering

--

Usage

  1. npm install css-constructor --save

  2. import css from 'css-constructor'

  3. Add a @css block just before the render function (important)

  4. Add transform-decorators-legacy as the first plugin in your .babelrc (already downloaded with šŸ’„).

If you are not familiar with babel plugins you can follow the detailed instructions here.

Or, if you would prefer using šŸ’„ without adding the babel transform for decorators, up-vote this issue.

--

How does it work?

šŸ’„ uses ES7 class method decorators on the render function. Detailed post coming soon.

Inspiration

Heavily inspired from glamor, styled-components and radium

Special thanks to thysultan. stylis is the bomb!

Support

ā­ļø this repo!