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

26 wiersze
522 B
TypeScript
Czysty Zwykły widok Historia

2021-03-27 11:14:42 +00:00
import React from "react";
import { slugify } from "./util";
2021-03-27 11:14:42 +00:00
type ColorWidgetProps = {
label: string;
value: string;
onChange: (value: string) => void;
id?: string;
2021-03-27 11:14:42 +00:00
};
export const ColorWidget: React.FC<ColorWidgetProps> = (props) => {
const id = props.id || slugify(props.label);
return (
<>
<label htmlFor={id}>{props.label}: </label>
<input
id={id}
type="color"
value={props.value}
onChange={(e) => props.onChange(e.target.value)}
/>
</>
);
};