Style-Panel

A CSS key-value panel for React.

Installation

style-panel is available as an npm package.

npm install style-panel

Example

https://dht.github.io/style-panel

Usage

Here is a quick example to get you started:

Add icon font to header:

<link href="//fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

Import

 import StylePanel from 'style-panel/StylePanel';

Simple

<div style={{width: '400px',position: 'fixed',top: 0,left: 0,marginLeft: '60px',zIndex: 999,backgroundColor: 'white',boxShadow: '0 0 5px rgba(0,0,0,0.1)',borderRadius: '1px'}}>
    <StylePanel
        styleId={ 1 }
        elementStyle={{color:'#f928f9', fontSize:'16px'}}
    />
</div>

Complete

<div style={{width: '400px',position: 'fixed',top: 0,left: 0,marginLeft: '60px',zIndex: 999,backgroundColor: 'white',boxShadow: '0 0 5px rgba(0,0,0,0.1)',borderRadius: '1px'}}>
    <StylePanel
        styleId={ 1 }
        elementStyle={{color:'#f928f9', fontSize:'16px'}}
        applyStyle={(style) => console.log(style)}
        previewStyle={(style) => console.log(style)}
        regainFocus={true}
        hideStyleGrid={false}
        iconName={'select_all'}    // material icon such as: text_format, image, view_column
    />
</div>

Contribution

To run locally install all the dependencies:

dev:

npm install

peer:

npm install react@^15.4.1 react-dom@^15.4.1 material-ui@^0.18.6

run with npm:

npm start

and open:http://localhost:3000

first test was added as a starting point:

npm test

We need to understand how to trigger long key presses and mouse moves in enzyme to further test this component. Any contributions are welcomed.

License

This project is licensed under the terms of the MIT license