Nonconformist Propaganda Machine

    react-lit-css

    0.1.5 • Public • Published

    react-lit-css

    Small library with a React hook and utils for component styling with tagged template literals

    Demo: https://codesandbox.io/s/lit-css-jzgzy

    Usage

    First install it with npm or yarn:

    $ npm install --save react-lit-css
    

    Then use it in your React components. Import the css tagged template function (which is also a hook) and write CSS with it. It returns an unique className with scoped CSS rules. Note that if you want to apply the class rules, you have to specify the :host pseudo-selector:

    import React from 'react'
    import { css } from 'react-lit-css'
     
    function App() {
     
        const rootClass = css`
            :host {
                background-color: #001D7F;
                border-radius: 12px;
                padding: 16px;
            }
            :host span {
                font-size: 24px;
                font-weight: bold;
                color: #FFF;
            }
        `
     
        return (
            <div className={rootClass}>
                <span> Hello React Lit CSS </span>
            </div>
        )
    }

    If you use VSCode, you can install the vscode-styled-components plugin for CSS syntax highlight.

    Under the hood, it only replaces all occurences of :host by the className in the CSS literal, injecting it into a style HTML Element and appending it to the DOM. Note that it also invokes a effect hook that watches the CSS literal, and updates its style element when changed.

    You can even create an object with several rules:

    const classes = {
        container: css`
            :host {
                background-color: #001D7F;
                border-radius: 12px;
                padding: 16px;
            }
        `,
        content: css`
            :host {
                font-size: 24px;
                font-weight: bold;
                color: #FFF;
            }
        `
    }
     
    return (
        <div className={classes.container}>
            <span className={classes.content}> Hello React Lit CSS </span>
        </div>
    )

    Other pseudo-selectors as well as media queries are also supported. Animation keyframes are also scoped:

    const rootClass = css`
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0px);
            }
        }
        :host {
            background-color: #001D7F;
            border-radius: 12px;
            padding: 16px;
            animation-name: fade-in;
            animation-duration: 300ms;
        }
        :host:hover {
            background-color: #FFF;
        }
        :host:hover span {
            background-color: #000;
        }
        :host span {
            font-size: 24px;
            font-weight: bold;
            color: #FFF;
        }
        @media (max-width: 400px) {
            :host span {
                font-size: 18px;
            }
        }
    `

    Install

    npm i react-lit-css

    DownloadsWeekly Downloads

    4

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • viniciusfonseca