React-TaxonomyPicker

A Taxonomy Picker control built with TypeScript for React based on React-Select. Initially built for use in Office 365 / SharePoint.

View demo Download Source

Features

  • Retrieve Terms from a Term Set by Term Set GUID.
  • Support for large Term Set using Async mode
    • Configurable via termSetCountMaxSwapToAsync property
  • Use SP.Taxonomy.js
  • Use Promise (polyfill it if needed IE)

Features not supported

  • Add new Terms (Open TermSets)

Scenarios supported

Scenarios not supported

  • SharePoint Provider-hosted app
  • Other environment in which we are not allowed to use JSOM
  • Add new terms to the Taxonomy Store (specific for get terms by now)

Installation

Steps to use react-taxonomypicker in your React project

1.Install from NPM

npm install --save react-taxonomypicker

2. Import and use in your application

import TaxonomyPicker from "react-taxonomypicker";
// Include its styles in you build process as well
import "react-taxonomypicker/dist/React.TaxonomyPicker.css";

3. Usage

Mock / Local mode

Don't configure termSetGuid and load the options from defaultOptions object.

<TaxonomyPicker
  name="Language"
  displayName="Language"
  defaultOptions={[
    { label: "English", value: "f50249b6-310d-43b6-aaa6-f0cb46d851bf" },
    { label: "Spanish", value: "237ca323-1ed8-4199-a49b-a9f7ce4256bf" },
    { label: "German", value: "44024c7e-f738-4755-90e1-15866327c806" },
    { label: "Italian", value: "65f67491-bdca-491a-84fa-f6fd913f40fa" },
  ]}
  multi
  showPath
/>

SharePoint environment mode

Configure termSetGuid with the desired term set

<TaxonomyPicker
  name="Language"
  displayName="Language"
  termSetGuid="26ebf149-101a-4996-9df2-8179a537350d"
  termSetName="Language"
  termSetCountMaxSwapToAsync={100}
  multi
  showPath
/>

Done

  • Expose as a Module / Global / UMD library
  • Upload to npm
  • Create ES6 sample application for usage
  • Create TypeScript sample application for usage
  • Create SPFx webpart sample for usage
  • Create types and include them with the npm package
  • onPickerChange event handler exposed
  • react-select properties exposed (extends them)
  • termSetCountMaxSwapToAsync property exposed to choose between Sync / Async modes
  • defaultOptions array exposed to enable input mock data when no termSetGuid configured
  • Create and Expose properties for custom styles

TODOs

  • Create types to allow people include with @types

GitHub