GB Term Picker

termPicker.js

import Select from 'react-select';

const { useSelect } = wp.data;
const { __ } = wp.i18n;

const TermPicker = (props) => {
	const { taxonomy, onChange, label, attributes, attribute } = props;
	const categories = useSelect((select) => select('core').getEntityRecords('taxonomy', taxonomy));

	if (categories && categories.length) {
		// construct options for Select from retrieved categories
		const options = categories.map((category) => ({
			label: category.name,
			value: category.id,
		}));

		return (
			<div className="block-term-picker">
				<p>{label}</p>
				<Select
					multiple
					options={options}
					onChange={onChange}
					isMulti
					value={JSON.parse(attributes[attribute] || null)}
				/>
			</div>
		);
	}

	return 'Loading...';
};

TermPicker.defaultProps = {
	label: __('Select A Term', 'text-domain'),
};

export default TermPicker;