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 = () => {

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171591

increased by0.79%

Number of lines in readme file

392

increased by10.42%

Worsened metrics

Number of low supply chain risk alerts

4

increased by33.33%

No dependency changes