search-select-react v1.0.3

search-select-react

A React component that accepts data Array of Objects and headers to search on multiple conditions and perform actions on select using click and keyboard events

Installation

npm install search-select-react

yarn add search-select-react

Usage

import React from 'react';
import {SearchSelect} from 'search-select-react';

const data = [
                {
                id: 1,
                name: 'John Doe',
                email: 'john@mail.com',
                phone: '1234567890',
              },
              {
                id: 2,
                name: 'Jane Doe',
                email: 'jane@mail.com',
                phone: '0987654321',
              },
];

const searchBy = ['name', 'email', 'phone'];

const display = ['name', 'email'];

const onSelectAction = (selected) => {
  console.log(selected);
};

const onNoResultAction = () => {
  console.log('No result found');
};

const App = () => {
  return (
    <div>
      <SearchSelect
        data={data}
        search={searchBy}
        display={display}
        select={onSelectAction}
        noResults={onNoResultAction}
        noResultsText='No Results Found! Click to Add New.'
        placeholder='Search'
        label='Search'
        name={'search'}
        helperText='Search for a user'
      />
    </div>
  );
};

export default App;

Styling

The component by default has no styling. You can style it using your own CSS or any css library like tailwindcss using the different class props available.

List of styling class props

All Props

License

MIT © trehansangpriya

Author

👤 Trehan Sangpriya

Website LinkedIn Twitter GitHub

Show your support

Give a ⭐️ if this project helped you!