react-style-editor

React Style Editor

 

A React component that displays and edits CSS, similar to the browser's DevTools.

Live demo

Features

• Parses any CSS string and formats it in a familiar fashion
• Validates each rule and each declaration using the browsers's own engine
• Facilitates commenting the CSS code through checkbox toggling
• Allows easy additions by clicking next to the desired location
• Has no dependencies (other than React)
• Is tiny (< 10 KB minified)
• Is customizable through classes
• Offers 3 output formats:
  • the code with preserved formatting
  • a machine-friendly model of the code (recursive array of objects)
  • the prettified code

Installation

npm i react-style-editor

Usage

import React from 'react';
import StyleEditor from 'react-style-editor';

class Component extends React.Component {
    render() {
        return (
            <StyleEditor
                defaultValue={`
                    div {color:red;}
                    /* Hello, World! */
                    @media screen {
                        article {
                            display: flex;
                        }
                    }
                `}
            />
        );
    }
}

Props

prop	type	default	description
defaultValue	string	''	The initial CSS code
value	string	undefined	The controlled CSS code
onChange	function	null	A closure that receives a single argument, string or array, depending on the value of outputFormats
outputFormats	string	'pretty'	Comma-separated values of: 'preserved', 'machine', 'pretty'
readOnly	boolean	false	All interactions with the component are blocked

All parameters are optional, but some are inter-related. For example, due to the nature of React, you should use StyleEditor either fully controlled or fully uncontrolled (see this article). A short summary:

• defaultValue => uncontrolled, the component is on its own
• value => controlled => you must also use the onChange or readOnly properties.

The above behavior is identical to that of normal React form elements, e.g. <textarea/>.

Any other props are spread to the internal root.

Exports

Besides the default export (StyleEditor), there are also a few utility functions exported:

• analyze(): ouputs the machine format
• parse(): a lighter version of analyze()
• stringify(): outputs the preserved format
• prettify(): outputs the pretty format

They all expect a CSS string as parameter and are useful if you don't want to use the React component and wait for its onChange.

Wishlist

• Color swatches (similar to the browser)
• Dropdown suggestions for properties/values (similar to the browser)
• Keyboard support for TAB, : and UP/DOWN increments of numeric values
• Theme support (similar to the browser)
• Toggle view mode: tree/original
• Undo/redo
• Better code quality through propTypes
• Filters (similar to the browser)
• Error messages displayed in the warning-sign's tooltip

Changelog

[0.4.0] - 2021-12-28

Fixed

• The one-time temporary iframe used for internal CSS validation is now removed from the DOM.
• Selecting texts was sometimes triggering edit-mode.

Changed

• All comments can now be toggled (#2).
• The copy command is no longer intercepted when a selection exists (#3).