react-datalist-input - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

package.json

		{
		"name": "react-datalist-input",
		"version": "3.0.3",
		"version": "3.0.4",
		"description": "react-datalist-input provides a React datalist/combobox component called DatalistInput. The component contains an input field with a dropdown menu of suggestions based on the current input.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -54,3 +54,3 @@ ![Simple demo of DatalistInput](/media/demo.gif)

		Note: React 18 required! Version 3.0.0 utilizes React 18. If you are using a React version below 18, install `react-datalist-input@2.2.1` instead! Find the documentation for version 2.2.1 [here](https://github.com/andrelandgraf/react-datalist-input/blob/bab05504c0dffa5f9343f2fcb5f075a38bad2512/README.md).
		Note: React 18 required! Version 3.0.0 utilizes React 18. If you use React <=17, install `react-datalist-input@2.2.1` instead! Find the documentation for version 2.2.1 [here](https://github.com/andrelandgraf/react-datalist-input/blob/bab05504c0dffa5f9343f2fcb5f075a38bad2512/README.md).

		@@ -82,3 +82,3 @@ ### npm

		You can also build something tailored to your own use case from scratch! Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how you create a autocomplete control with pure HTML, CSS, and JS.
		You can also build something tailored to your own use case from scratch! Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how to create a autocomplete control with pure HTML, CSS, and JS.

		@@ -154,2 +154,3 @@ ## ARIA

		// Your data source
		const options = [
		@@ -164,3 +165,3 @@ { name: 'Chocolate' },
		const YourComponent = ({ options }) => {
		const [item, setItem] = useState(); // The selectedItem
		const [item, setItem] = useState(); // The selected item will be stored in this state.

		@@ -229,3 +230,3 @@ /**
		// Import the default filter startWithValueFilter
		import DatalistInput, { startsWithValueFilter } from '../combobox';
		import DatalistInput, { startsWithValueFilter } from 'react-datalist-input';

		@@ -243,4 +244,40 @@ const YourComponent = () => {

		### Fine-grained Control
		### Fine-grained Control Vol. 1 - Select

		Since all props of the input element are exposed, you can easily customize DatalistInput to act as an Select component.

		Just set the input field to readonly, adjust the filter to always show all options, and set the selected item as the new value of the input field:

		```tsx
		import { DatalistInput, useComboboxControls } from 'react-datalist-input';
		const items = [
		{ id: 'Chocolate', value: 'Chocolate' },
		{ id: 'Coconut', value: 'Coconut' },
		{ id: 'Mint', value: 'Mint' },
		{ id: 'Strawberry', value: 'Strawberry' },
		{ id: 'Vanilla', value: 'Vanilla' },
		];
		function YourComponent() {
		// The useComboboxControls hook provides useful states so you don't have to define them yourself.
		const { value, setValue } = useComboboxControls({ initialValue: 'Chocolate' }); // Same as: const [value, setValue] = useState("Chocolate");
		return (
		<DatalistInput
		value={value}
		onSelect={(item) => setValue(item.value)}
		label="Select ice cream flavor"
		items={items}
		filters={[(items) => items]}
		inputProps={{
		title: 'Please select an ice cream flavor',
		required: true,
		pattern: `^(${items.map((i) => i.value).join('\|')})$`,
		readOnly: true,
		}}
		/>
		);
		}
		```

		### Fine-grained Control Vol. 2 - Multi-Select

		Use the `useComboboxControls` hook to get fine-grained control over the input value and the dropdown expansion states or just manage the value and expanded state yourself!
		@@ -251,3 +288,3 @@
		```jsx
		import { DatalistInput, useComboboxControls, startsWithValueFilter } from '../combobox';
		import { DatalistInput, useComboboxControls, startsWithValueFilter } from 'react-datalist-input';

		@@ -254,0 +291,0 @@ const YourComponent = () => {

react-datalist-input - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics