Function ColorPicker

packages/react-aria-components/src/ColorPicker.tsx:58–83

(props: ColorPickerProps)

 * It simplifies building color pickers with customizable layouts via composition.
 */
export function ColorPicker(props: ColorPickerProps): JSX.Element {
  let ctx = useSlottedContext(ColorPickerContext, props.slot);
  props = mergeProps(ctx, props);
  let state = useColorPickerState(props);
  let renderProps = useRenderProps({
    ...props,
    values: {
      color: state.color
    }
  });

  return (
    <Provider
      values={[
        [ColorPickerStateContext, state],
        [ColorSliderContext, {value: state.color, onChange: state.setColor}],
        [ColorAreaContext, {value: state.color, onChange: state.setColor}],
        [ColorWheelContext, {value: state.color, onChange: state.setColor}],
        [ColorFieldContext, {value: state.color, onChange: state.setColor}],
        [ColorSwatchContext, {color: state.color}],
        [ColorSwatchPickerContext, {value: state.color, onChange: state.setColor}]
      ]}>
      {renderProps.children}
    </Provider>
  );
}