@uiw/react-color-editable-input-hsla
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

React Color Editable Input HSLA

Buy me a coffee npm bundle size npm version Open in unpkg

EditableInputHSLA Component is a subcomponent of @react-color.

react-color-editable-input-rgba

Install

npm i @uiw/react-color-editable-input-hsla

Usage

import React, { useState } from 'react';
import { hsvaToHex } from '@uiw/color-convert';
import EditableInputHSLA from '@uiw/react-color-editable-input-hsla';

export default function Demo() {
  const [hsva, setHsva] = useState({ h: 209, s: 36, v: 90, a: 1 });
  return (
    <div style={{ padding: '0 10px 0 20px' }}>
      <EditableInputHSLA
        hsva={hsva}
        onChange={(color) => {
          setHsva({ ...hsva, ...color.hsva });
        }}
      />
    </div>
  );
}

Props

import React from 'react';
import { EditableInputRGBAProps } from '@uiw/react-color-editable-input-rgba';
export interface EditableInputHSLAProps extends Omit<EditableInputRGBAProps, 'rProps' | 'gProps' | 'bProps'> {
  hProps?: EditableInputRGBAProps['gProps'];
  sProps?: EditableInputRGBAProps['gProps'];
  lProps?: EditableInputRGBAProps['gProps'];
  aProps?: EditableInputRGBAProps['aProps'];
}
declare const EditableInputHSLA: React.ForwardRefExoticComponent<EditableInputHSLAProps & React.RefAttributes<HTMLDivElement>>;
export default EditableInputHSLA;

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

Package Sidebar

Install

npm i @uiw/react-color-editable-input-hsla

Weekly Downloads

10,645

Version

2.1.1

License

MIT

Unpacked Size

14.7 kB

Total Files

7

Last publish

Collaborators

  • uiwjs
  • wcjiang