9.6.0 • Published 4 months ago

@fluentui/react-tag-picker v9.6.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

@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>
  );
};
9.3.14

9 months ago

9.3.13

10 months ago

9.3.12

10 months ago

9.3.11

10 months ago

9.3.10

11 months ago

9.3.7

11 months ago

9.3.9

11 months ago

9.3.8

11 months ago

9.4.3

8 months ago

9.4.2

9 months ago

9.4.1

9 months ago

9.4.0

9 months ago

9.5.5

6 months ago

9.5.4

7 months ago

9.5.3

7 months ago

9.5.2

7 months ago

9.5.1

7 months ago

9.5.0

8 months ago

9.5.9

4 months ago

9.5.8

5 months ago

9.5.7

5 months ago

9.5.6

6 months ago

9.6.0

4 months ago

9.3.6

1 year ago

9.3.5

1 year ago

9.3.4

1 year ago

9.3.3

1 year ago

9.3.2

1 year ago

9.2.5

1 year ago

9.2.4

1 year ago

9.2.3

1 year ago

9.2.2

1 year ago

9.0.4

1 year ago

9.2.1

1 year ago

9.1.1

1 year ago

9.1.0

1 year ago

9.3.1

1 year ago

9.3.0

1 year ago

9.2.0

1 year ago

9.0.3

1 year ago

9.0.2

1 year ago

9.0.1

1 year ago

9.0.0

1 year ago