SPFx SwatchColorPicker Office UI Fabric React Control example

In this SPFx tutorial, we will discuss how to use the SwatchColorPicker Office UI Fabric React Control in SPFx client-side web part. Step by step, we will see how to create an SPFx web part, and then we will explore how to utilize the SwatchColorPicker React control within it.

Here, we will use the ColorPicker, SwatchColorPicker, and a DefaultButton.

Here we will build something like the above picture. This is an SPFx client-side web part, you can see the color picker, once you select any color, it will appear in a rounded shape, and then on hover of any circle, the button background color will get changed.

Check out SPFX SwatchColorPicker Fluent UI React Control

SPFx SwatchColorPicker Example

We can display the swatch color picker in various sizes, such as simple circles and squares, and also in custom sizes. There is not much documentation on the Microsoft site, but you can see how to use the SwatchColorPicker Example.

First, we will create a SharePoint Framework client-side web part, ensuring we select the React framework, as we will be using the SwatchColorPicker Office UI Fabric React Control.

Open the Node.js command prompt and then create a directory in a location where you want to save the files.

md FabricUiColorPicker

cd FabricUiColorPicker

Then run the below command to start creating the spfx client-side web part.

yo @microsoft/sharepoint

It will ask you the following things:

• What is your solution name? Click on Enter to take the default name.
• Which baseline packages do you want to target for your component (s)? Here, choose one from the options below:
  • SharePoint Online only (latest)
  • SharePoint 2016 onwards, including 2019 and SharePoint Online
  • SharePoint 2019 onwards, including SharePoint Online

Here select SharePoint Online only (latest).

• Where do you want to place the files? Choose one from the following:
  • Use the current folder
  • Create a subfolder with the solution name

Here, choose Use the current folder.

• Do you to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Choose N.
• Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? Choose N.
• Which type of client-side component to create? Choose WebPart from the options below:
  • WebPart
  • Extension
  • Library

• What is your web part name? Give FabricUiColorPicker as the web part name
• What is your web part description? Click on Enter to take the default name.
• Which framework would you like to use? Choose React from the options below:
  • No JavaScript framework
  • React
  • Knockout

Then it will take some time, and then you can see a successful message that the solution has been created.

Then run the below command to open the solution using Visual Studio Code.

code .

The solution looks like this:

Here, we need to add our code in the component file that is the FabricUiColorPicker.tsx.

The code here is mainly self-explanatory, and the first thing we will do is to write the import statement as follows:

import {
  ColorPicker,
  IChoiceGroupOption,
  IColor,
  IColorPickerStyles,
  SwatchColorPicker,
  Label,
  DefaultButton,
} from 'office-ui-fabric-react/lib/index';

In the render method, we have added the controls, and the complete code looks like this:

import * as React from 'react';
import { IFabricUiColorPickerProps } from './IFabricUiColorPickerProps';
import {
  ColorPicker,
  IChoiceGroupOption,
  IColor,
  IColorPickerStyles,
  SwatchColorPicker,
  Label,
  DefaultButton,
} from 'office-ui-fabric-react/lib/index';

var colorArray = [];
export interface Istate {
  swatchcolor: any;
  previewColor: any;
  color: any;
}
export default class FabricUiColorPicker extends React.Component<IFabricUiColorPickerProps, Istate> {
  constructor(props) {
    super(props);
    this.state = {
      swatchcolor: [],
      previewColor: "",
      color: ""
    };
  }
  public render(): React.ReactElement<IFabricUiColorPickerProps> {
    return (
      <div>
        <h1>Swatch Color Picker with Dynamic Colors on Selection from Color Picker</h1>
        <ColorPicker
          color={this.state.color}
          onChange={this._updateColor}
          styles={colorPickerStyles}
        />
        <SwatchColorPicker
          selectedId={this.state.previewColor}
          onCellHovered={(id, color) => this.setState({ previewColor: color! })}
          onColorChanged={(id, color) => this.setState({ previewColor: color! })}
          columnCount={9}
          cellShape={'circle'}
          cellHeight={50}
          cellWidth={50}
          cellBorderWidth={3}
          colorCells={
            this.state.swatchcolor
          }
        />
        <Label style={{
          color: this.state.previewColor ? this.state.previewColor : "#000",
          fontSize: '24px'
        }}>Colorful Text on Hover and Change</Label>
        <DefaultButton
          text="Colorful Button"
          style={{
            backgroundColor: this.state.previewColor ? this.state.previewColor : "#fff",
            fontSize: '24px',
            border: '1px solid black'
          }}
        />
      </div>
    );
  }
  private _updateColor = async (ev: React.SyntheticEvent<HTMLElement>, colorObj: IColor) => {
    colorArray.push({ ID: '#' + colorObj.hex, label: '#' + colorObj.hex, color: '#' + colorObj.hex });
    await this.setState({ swatchcolor: colorArray });
    console.log(colorArray);
  }
}


const colorPickerStyles: Partial<IColorPickerStyles> = {
  panel: { padding: 12 },
  root: {
    maxWidth: 352,
    minWidth: 352,
  },
};

Once you have added the code, run the