# React HTML Datalist

![NPM](https://img.shields.io/npm/l/react-html-datalist)
![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/react-html-datalist)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-html-datalist)

React HTML Datalist is a simple component that makes it easier to work with html `<datalist>` tag in React. The usage of this component is very similar to that of the `<select>` tag.

##### What problem does it solve?
Unlike the `<select>` tag in html, a `<datalist>` tag does not provide the flexibility to manage different **value** and **text** for an `<option>`.

For example, **option** for `select` can be given as:
`<option value="1">Pizza</option>`

but **option** for `datalist` is given as:
`<option value="Pizza" />`

Hence, React HTML Datalist makes it easier to manage both **text** and **value** for options in datalist.

## Installation
It's easy to install `react-html-datalist`, no extra piece of code is needed.
Simply run the command:
```
npm install react-html-datalist
```

## Usage
To use the `react-html-datalist` component you can simply import it and pass the related props. Moreover, the component can be used with both class and function components. Refer to the examples below.

## Examples
#### # Function Component
```jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactHTMLDatalist from "react-html-datalist";

const App = props => {
  const [detail, setDetail] = useState({ food_id: "" });

  const handleChange = e => {
    setDetail({ ...detail, [e.target.name]: e.target.value });
  };

  return (
    <div className="App">
      <h1>React HTML Datalist</h1>
      <p>
        <b>Selected food id:</b> {detail.food_id || "(none)"}
      </p>

      <small>Search or select in the datalist: </small>

      <ReactHTMLDatalist
            name={"food_id"}
            onChange={handleChange}
            classNames={"classone classtwo"}
            options={[
              { text: "Pizza", value: "1" },
              { text: "Burger", value: "2" },
              { text: "Sandwich", value: "3" },
              { text: "French Fries", value: "4" }
            ]}
      />
    </div>
  );
};

export default App;
```
###### Try `react-html-datalist` with function components (hooks) on codesandbox:
#
[![Edit react-html-datalist-with-react-hooks](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kind-water-s1hex?fontsize=14)

#### # Class Component
```jsx
import React from "react";
import ReactDOM from "react-dom";
import ReactHTMLDatalist from "react-html-datalist";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      food_id: ""
    };
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
  
    var { food_id } = this.state;

    return (
      <div className="App">
        <h1>React HTML Datalist</h1>
        <p>
          <b>Selected food id:</b> {food_id || "(none)"}
        </p>

        <small>Search or select in the datalist: </small>

        <ReactHTMLDatalist
              name={"food_id"}
              onChange={this.handleChange}
              classNames={"classone classtwo"}
              options={[
                { text: "Pizza", value: "1" },
                { text: "Burger", value: "2" },
                { text: "Sandwich", value: "3" },
                { text: "French Fries", value: "4" }
              ]}
        />
      </div>
    );
  }
}

export default App;
```
###### Try `react-html-datalist` with class components on codesandbox:
#
[![Edit react-html-datalist-with-class-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pensive-rgb-51pn6?fontsize=14)

## Props

The component can be provided with the following props:

| prop | datatype | example | is required |
| ------ | ------ | ------ | ------ |
| name | string | "myform" | yes |
| classNames | string | "class-one class2" | no |
| styles | object | { color: "#0cc" } | no |
| onChange | function | handleChange | yes |
| options | array | [ { text:"pizza" ,value:1 }, { text: "burger", value: 2 } ] | yes |
#
> Note: The component **does not** require a `value` prop. It manages value on it's own via the provided `onChange` prop. 

License
----

MIT


**Enjoy!**