9.0.3 • Published 5 days ago
@fluentui/react-tag-picker v9.0.3
@fluentui/react-tag-picker
React TagPicker components for Fluent UI React
To import React TagPicker components:
import * as React from 'react';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-tag-picker';
import { Tag, Avatar } from '@fluentui/react-components';
const options = [
'John Doe',
'Jane Doe',
'Max Mustermann',
'Erika Mustermann',
'Pierre Dupont',
'Amelie Dupont',
'Mario Rossi',
'Maria Rossi',
];
export const Example = () => {
const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
setSelectedOptions(data.selectedOptions);
};
return (
<div style={{ maxWidth: 400 }}>
<TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
<TagPickerControl>
<TagPickerGroup>
{selectedOptions.map(option => (
<Tag key={option} shape="rounded" media={<Avatar name={option} color="colorful" />} value={option}>
{option}
</Tag>
))}
</TagPickerGroup>
<TagPickerInput />
</TagPickerControl>
<TagPickerList>
{options
.filter(option => !selectedOptions.includes(option))
.map(option => (
<TagPickerOption
secondaryContent="Microsoft FTE"
media={<Avatar name={option} color="colorful" />}
value={option}
key={option}
>
{option}
</TagPickerOption>
))}
</TagPickerList>
</TagPicker>
</div>
);
};
0.0.0-nightly-20240521-0405.1
5 days ago
9.0.3
6 days ago
0.0.0-nightly-20240517-0405.1
9 days ago
0.0.0-nightly-20240520-0407.1
6 days ago
0.0.0-nightly-20240516-0406.1
10 days ago
9.0.2
10 days ago
0.0.0-nightly-20240515-0405.1
11 days ago
0.0.0-nightly-20240514-0405.1
12 days ago
9.0.1
13 days ago
0.0.0-nightly-20240513-0408.1
13 days ago
0.0.0-nightly-20240510-0407.1
16 days ago
9.0.0
17 days ago