React Suggest Field

About the Project

React Suggest Field is an NPM package to help you quickly develop an auto-complete suggest field. You can try it on this live storybook demo!

Built With

• TypeScript
• React
• SCSS

Live Demo

Live Demo Link

Installation

$ npm install react-suggest-field
$ yarn add react-suggest-field

Types & Props

Types

Type	Detail
ItemType	{ id: IdType, label: string }
IdType	string/number/null/undefined
ErrorMessagesType	{ maximumReached: string, alreadyAdded: string, unavailableCharacters: string }

Props in SimpleFilter

Props	Optional	Types	Default Value
originSuggestions	required	ItemType[]	[]
onClick	required	(selectedItem: ItemType) => void	-
btnLabel	optional	string	'Search'
placeholder	optional	string	-
className	optional	string	-

Props in StoreSelectedItems

Props	Optional	Types	Default Value
items	required	state: ItemType[]	-
setItems	required	React.Dispatch<React.SetStateAction<ItemType[]>>	-
originSuggestions	required	ItemType[]	-
inputRegexStr?	optional	string	/[A-Za-z0-9\s]/
btnLabel	optional	string	'Add'
className	optional	string	-
maxItemLength	optional	number	-
placeholder	optional	string	-
error	required	state: string	-
setError	required	React.Dispatch<React.SetStateAction>	-
showErrorMessage	optional	boolean	true
errorMessages	optional	ErrorMessagesType	maximumReached: 'Unable to add a new item as it reached 3 items.', alreadyAdded: 'This item is already added.', unavailableCharacters: 'Sorry... Only letters, and numbers are available.'

Props in SimpleFilter

Props	Optional	Types	Default Value
children	required	React.Node	-
title	optional	string	-

Example

import React from 'react';
import { SimpleFilter, StoreSelectedItems, ItemType, CompContainer, ErrorMessagesType } from 'react-suggest-field';
import 'react-suggest-field/dist/bundle.css';

  const originSuggestions = [
  {
    id: 1,
    label: 'Red',
  },
  {
    id: 2,
    label: 'Blue',
  },
  {
    id: 3,
    label: 'Yellow',
  },
  {
    id: 4,
    label: 'Green',
  },
  {
    id: 5,
    label: 'Black',
  },
  {
    id: 6,
    label: 'White',
  },
];

const initialItems = [
  {
    id: 7,
    label: 'Rainbow',
  },
];

const maxItemLength = 3

const myErrorMessages: ErrorMessagesType = {
  maximumReached: `Unable to add a new item as it reached ${maxItemLength} items.`,
  alreadyAdded: 'This item is already added.',
  unavailableCharacters: 'Sorry... Only letters, numbers are available.',
};

function App() {

  const [items, setItems] = useState<ItemType[]>(initialItems)
  const [error, setError] = useState<string>('')

  return (
    <>
      <CompContainer title={'Store Selected Items'}>
        <StoreSelectedItems
          items={items}
          setItems={setItems}
          error={error}
          setError={setError}
          originSuggestions={originSuggestions}
          btnLabel={'Add'}
          className={'wonderful-class'}
          maxItemLength={maxItemLength}
          placeholder="Input something to add"
          errorMessages={myErrorMessages}
          showErrorMessage={true}
        />
      </CompContainer>
      <CompContainer title={'Simple Filter'}>
        <SimpleFilter
          originSuggestions={originSuggestions}
          placeholder="Input something to filter"
          onClick={(selectedItem) => alert(`${selectedItem.label} is inputted!`)}
          btnLabel={'Search!'}
          className={'wonderful-class'}
        />
      </CompContainer>
    </>
  );
}

export default App;

Author

👤 Yoko Saka

• GitHub: @yocosaka
• LinkedIn: Yoko Saka

Contributions

Code Contributions

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Show your support

Give a ⭐️ if you like this project!

License

This project is MIT licensed.

Acknowledgements

• npmjs
• Storybook
• Rollup