9.3.0 • Published 4 months ago

@fluentui/react-swatch-picker v9.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

@fluentui/react-swatch-picker

React Swatch Picker components for Fluent UI React

The SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern. The SwatchPicker can be integrated within a popover or used as a standalone feature.

Usage

To import React SwatchPicker components:

import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';

Simple example of SwatchPicker Usage:

import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';

export const App = () => {
  const [selectedValue, setSelectedValue] = React.useState('00B053');
  const [selectedColor, setSelectedColor] = React.useState('#00B053');
  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
    setSelectedValue(data.selectedValue);
    setSelectedColor(data.selectedColor);
  };

  return (
    <>
      <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
        <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
        <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
        <ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
        <ColorSwatch disabled color="#90D057" value="90D057" aria-label="light green" />
        <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
        <ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />
        <ColorSwatch color="#006EBD" value="006EBD" aria-label="blue" />
        <ColorSwatch color="#011F5E" value="011F5E" aria-label="dark blue" />
        <ColorSwatch color="#712F9E" value="712F9E" aria-label="purple" />
      </SwatchPicker>

      <div
        style={{
          backgroundColor: selectedColor,
        }}
      />
    </>
  );
};

Specification

See the Spec.md file for background information on the design/engineering decisions of the component.

API

For information about the components, please refer to the API documentation.

9.2.8

5 months ago

9.2.7

5 months ago

9.2.6

6 months ago

9.2.5

6 months ago

9.2.4

7 months ago

9.2.3

7 months ago

9.2.2

7 months ago

9.2.1

7 months ago

9.2.9

4 months ago

9.3.0

4 months ago

9.2.0

8 months ago

9.1.17

10 months ago

9.1.18

10 months ago

9.1.19

9 months ago

9.1.13

11 months ago

9.1.14

11 months ago

9.1.15

11 months ago

9.1.16

11 months ago

9.1.20

9 months ago

9.1.12

1 year ago

9.1.11

1 year ago

9.1.10

1 year ago

9.1.9

1 year ago

9.1.1

1 year ago

9.1.8

1 year ago

9.1.7

1 year ago

9.1.6

1 year ago

9.1.5

1 year ago

9.1.4

1 year ago

9.1.3

1 year ago

9.1.2

1 year ago

9.1.0

1 year ago