React Shadow Picker

A shadow picker inspired by the Chromium devtools

Example

Live Demo

Installation

yarn add react-shadow-picker

Usage

The component can be used either in a Controlled or Uncontrolled way. If you pass the value back to the component, it will be controlled.

import {ShadowPicker} from "react-shadow-picker";

const App = () => {
    const [shadow, setShadow] = useState("0px 0px 10px 10px #44444455");

    return (
        <div style={{boxShadow: shadow}}>
            <ShadowPicker
                value={shadow}
                onChange={(value) => {
                    setShadow(value);
                }}
            />
        </div>
    );
};

Styling

Assign the picker a custom class

<ShadowPicker className={"custom-picker"} ...
/>

and then style it with these classes

.custom-picker.shadow-picker {
    background: antiquewhite;
    color: blue;
}

.custom-picker .shadow-picker__position {
    border: 1px solid blue;
}

.custom-picker .shadow-picker__position.active {
    background: aquamarine;
}

.custom-picker .shadow-picker__grid {
    border: 1px solid blue;
}

.custom-picker .shadow-picker__grid-line {
    color: red;
}

.custom-picker .shadow-picker__grid-handle {
    color: red;
}

.custom-picker .shadow-picker__input {
    border: 1px solid teal;
}

.custom-picker .shadow-picker__slider {
    background: red;
}

.custom-picker .shadow-picker__slider::-webkit-slider-thumb {
    background: blue;
}