SPFx SwatchColorPicker Office UI Fabric React Control example

In this SPFx tutorial, we will discuss how to use 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 see how to use SwatchColorPicker react control inside it.

Here we will use the ColorPicker, SwatchColorPicker and also we will use a button, 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.

SPFx SwatchColorPicker Example

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

So, first, we will create a SharePoint Framework client-side web part, also make sure to choose the react framework, because we are going to use the SwatchColorPicker Office UI Fabric React Control.

Open the nodejs 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 below 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 below options:
  • 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 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 below options:
  • 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 below options:
  • No JavaScript framework
  • React
  • Knockout

Then it will take sometime and then you can see a successful message that the solution got created.

Then run the below command to open the solution using visual studio code.

code .

The solution looks like below:

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

You may like SPFx fluent UI react dropdown example.

The code here is mostly the self explanatory and the first thing we will do is to write the import statement like below:

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 below:

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 added the code run the below command which will open the localworkbench. While the local workbench is running, open the SharePoint workbench and add the web part.

gulp serve

Once you add the spfx web part, you can see it will appear like below:

Here when you hover in the circle, the button background color will change.

If you want to deploy the web part to the SharePoint environment, then run the below commands.

gulp bundle --ship

gulp package-solution --ship

Once you run the above command, it will create the .sppkg file under the SharePoint folder.

Simply, upload this file into the tenant app catalog site or SharePoint site collection app catalog site. Then you can add the web part into a modern web part page in SharePoint Online.

Video tutorial SPFx SwatchColorPicker Office UI Fabric React Control example

I have created a video tutorial on SwatchColorPicker Office UI Fabric React Control example with SharePoint framework (SPFx) and uploaded it to our YouTube Channel. Have a look at it below:

Download the SPFx Solution

You can download the solution from the below URL and then just run npm i command to install the node module.

Download Here

This is how we can work with SwatchColorPicker Office UI Fabric React Control in SharePoint framework.

You may like the following SPFx tutorials:

• SharePoint Framework – Fluent UI React ChoiceGroup
• How to add new webpart in spfx solution
• office-ui-fabric-react combobox example in SharePoint Framework (SPFx)
• SharePoint Framework CRUD Operations using React
• error TS1192: Module has no default export
• SharePoint framework crud operations no javascript framework
• SPFx Fluent UI Basic List Example

In this tutorial, we learned how to use SwatchColorPicker Office UI Fabric React Control in SharePoint framework client side web part.