JSPM

  • Created
  • Published
  • Downloads 66565
  • Score
    100M100P100Q153396F
  • License MIT

Color Editable Input HSLA

Package Exports

  • @uiw/react-color-editable-input-hsla

Readme

Using my app is also a way to support me:
Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Mousio Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe

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?: false | 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.