React-TaxonomyPicker
A Taxonomy Picker control built with TypeScript for React based on React-Select. Initially built for use in Office 365 / SharePoint.
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
- SharePoint Web Part using Script Editor or Content Editor Web Part
- SharePoint Framework Web Part (SPFx)
- ES6 project consumer sample
- TypeScript project consumer sample
- SPFx project consumer sample
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.
SharePoint environment mode
Configure termSetGuid with the desired term set
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