diff --git a/example/src/demos/CustomTagList.jsx b/example/src/demos/CustomTagList.jsx
new file mode 100644
index 0000000..02b50c1
--- /dev/null
+++ b/example/src/demos/CustomTagList.jsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react'
+import { ReactTags } from '../../../src'
+import { suggestions } from '../countries'
+
+function isValid(value) {
+ return /^[a-z]{4,12}$/i.test(value)
+}
+
+export function CustomTagList() {
+ const [selected, setSelected] = useState([])
+
+ const onAdd = useCallback(
+ (newTag) => {
+ setSelected([...selected, newTag])
+ },
+ [selected]
+ )
+
+ const onDelete = useCallback(
+ (tagIndex) => {
+ setSelected(selected.filter((_, i) => i !== tagIndex))
+ },
+ [selected]
+ )
+
+ const onValidate = useCallback((value) => isValid(value), [])
+
+ function getTagByTagKey(key, child) {
+ return {
+ suggestion: suggestions.find(
+ (suggestion) => `${suggestion.value}-${suggestion.label}` === key
+ ),
+ child,
+ }
+ }
+
+ function groupChildrenByFirstCharacter(mappedSuggestions) {
+ return mappedSuggestions.reduce((acc, { suggestion, child }) => {
+ if (suggestion) {
+ const firstChar = suggestion.label.charAt(0).toUpperCase()
+ if (!acc[firstChar]) {
+ acc[firstChar] = []
+ }
+ acc[firstChar].push({ suggestion, child })
+ }
+ return acc
+ }, {})
+ }
+
+ function CustomTagList({ children, label, classNames, listRef }) {
+ const mappedSuggestions = children.map((child) => getTagByTagKey(child.key, child))
+ const groupedSuggestions = groupChildrenByFirstCharacter(mappedSuggestions)
+
+ return (
+ <>
+ {Object.keys(groupedSuggestions).map((key) => (
+
+
Countries starting with the letter "{key}"
+
+ {groupedSuggestions[key].map(({ suggestion, child }) => (
+
+ {child}
+
+ ))}
+
+
Select the countries you have visited below. They will be grouped alphabetically:
+ React Tags
-
-
- React Tags
+
+
+ React Tags
+
+
+ React Tags
+
+ React Tag Autocomplete is a simple, accessible, tagging component ready to drop into your
+ React projects ⚛️
+
+ Examples
+
+
+ Documentation
- React Tag Autocomplete is a simple, accessible, tagging component ready to drop into your
- React projects ⚛️
+ Please refer to
+ the project readme
+ for detailed usage information.
- Examples
-
-
- Documentation
-
- Please refer to
- the project readme
- for detailed usage information.
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/example/src/main.jsx b/example/src/main.jsx
index 97d542d..7c5c39b 100644
--- a/example/src/main.jsx
+++ b/example/src/main.jsx
@@ -1,6 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { CustomTags } from './demos/CustomTags'
+import { CustomTagList } from './demos/CustomTagList'
import { CountrySelector } from './demos/CountrySelector'
import { CustomValidity } from './demos/CustomValidity'
import { UsingTheAPI } from './demos/UsingTheAPI'
@@ -9,6 +10,9 @@ import { AsyncSuggestions } from './demos/AsyncSuggestions'
// HACK: Wait for onload to ensure styles are loaded due to a bug with Safari
//
window.onload = () => {
+ const container0 = ReactDOM.createRoot(document.getElementById('demo-0'))
+ container0.render(
+ {children.map((child) => (
+
+ {child}
+
+ ))}
+
+ )
+}
+```
+
#### renderTag (optional)
A custom selected tag component to render. Receives the selected tag object, required tag element attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
diff --git a/src/components/ReactTags.tsx b/src/components/ReactTags.tsx
index fcb2cd8..082a057 100644
--- a/src/components/ReactTags.tsx
+++ b/src/components/ReactTags.tsx
@@ -23,6 +23,7 @@ import type {
OptionRenderer,
RootRenderer,
TagRenderer,
+ TagListRenderer,
} from '.'
import type {
ClassNames,
@@ -99,6 +100,7 @@ type ReactTagsProps = {
renderOption?: OptionRenderer
renderRoot?: RootRenderer
renderTag?: TagRenderer
+ renderTagList?: TagListRenderer
selected: TagSelected[]
suggestions: TagSuggestion[]
suggestionsTransform?: SuggestionsTransform
@@ -143,6 +145,7 @@ function ReactTags(
renderOption,
renderRoot,
renderTag,
+ renderTagList,
selected = [],
suggestions = [],
suggestionsTransform = matchTagsPartial,
@@ -200,7 +203,7 @@ function ReactTags(
>
{labelText}
-
+
{managerRef.current.state.selected.map((tag, index) => (
[]
+ classNames: ClassNames
label: string
+ listRef: React.MutableRefObject
}
-export function TagList({ children, label }: TagListProps): JSX.Element {
- const { classNames } = useContext(GlobalContext)
- const { listRef } = useTagList()
+export type TagListRenderer = (props: TagListRendererProps) => JSX.Element
+const DefaultTagList: TagListRenderer = ({
+ children,
+ label,
+ classNames,
+ listRef,
+}: TagListRendererProps) => {
return (
{children.map((child) => (
@@ -22,3 +29,16 @@ export function TagList({ children, label }: TagListProps): JSX.Element {
)
}
+
+export type TagListProps = {
+ children: React.ReactElement[]
+ label: string
+ render?: TagListRenderer
+}
+
+export function TagList({ children, label, render = DefaultTagList }: TagListProps): JSX.Element {
+ const { classNames } = useContext(GlobalContext)
+ const { listRef } = useTagList()
+
+ return render({ classNames, children, label, listRef })
+}
diff --git a/src/test/ReactTags.test.tsx b/src/test/ReactTags.test.tsx
index c7ed781..4175da7 100644
--- a/src/test/ReactTags.test.tsx
+++ b/src/test/ReactTags.test.tsx
@@ -924,6 +924,33 @@ describe('React Tags Autocomplete', () => {
})
})
+ it('renders a custom tag list component when provided', () => {
+ const renderer: Harness['props']['renderTagList'] = ({
+ children,
+ label,
+ classNames,
+ listRef,
+ }) => (
+
+ {children.map((child) => (
+
+ {child}
+
+ ))}
+
+ )
+
+ harness = new Harness({ renderTagList: renderer, selected: [{ ...suggestions[10] }] })
+
+ expect(harness.selectedList.id).toBe('custom-tag-list')
+ })
+
it('renders custom selected tag components when provided', () => {
const renderer: Harness['props']['renderTag'] = ({ classNames, tag, ...props }) => (