React-datalist-field NPM

react-datalist-field demolink

React datalist component

Installation

npm install react-datalist-field --save

Demo

demolink

Usage

import React from 'react';
import DataList from 'react-datalist-field';

function YourComponent() {
  const [state, setState] = useState({ x: 10, y: 10 });

  var cars = [
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
        {id=1,model='',company=''},
      ]
    
    return (
            <DataList 
				options={cars} 
				id='id' 
				left='model' 
				right='company' 
				onOptionChange={this.handleChange} 
				selectedId=''
				selectedIdName='selectedCard' 
			/>
      </form>
    );
}

Props

Name	Type	Description	Default
options	array	all the items for datalist	null
id	string	name for selected value	null
left	string	name for left value of datalist	null
right	string	name for right value of datalist	null
onOptionChange	function	function to trigger when option value change	null
selectedIdName	string	input element name for selected option value	null
selectedId	string	key value to set selected value for DataList	null
dev	boolean	wen set to true will show the selected option value	false
setNewValue	boolean	when set to true will let user add new values to options to select from the datalist.	false

Styling DataList

class name
.reactDatalist_input
.reactDatalist_show
.reactDatalist_hide
.reactDatalist_options
.reactDatalist_options::-webkit-scrollbar
.reactDatalist_options_list
.reactDatalist_options_list li
.reactDatalist_options_list li .float-right
.reactDatalist_options_list li .float-left
.reactDatalist_options_list li a
.reactDatalist_options_list li:hover
.reactDatalist_options_list li:hover a