mysticsymbolic.github.io/lib/color-widget.tsx

26 wiersze
555 B
TypeScript

import React from "react";
import { slugify } from "./util";
type ColorWidgetProps = {
label: string;
value: string;
onChange: (value: string) => void;
id?: string;
};
export const ColorWidget: React.FC<ColorWidgetProps> = (props) => {
const id = props.id || slugify(props.label);
return (
<span className="color-widget">
<label htmlFor={id}>{props.label}: </label>
<input
id={id}
type="color"
value={props.value}
onChange={(e) => props.onChange(e.target.value)}
/>
</span>
);
};