React Related Box

A React Component to help with complex search inputs

Info

This library has made to help you to implement search inputs, it can be used to show suggestions while users are typing.

Also is important to mention that React Related Box is highly typed!

Install

npm install react-related-box
or
yarn add react-related-box

Getting started

RelatedBox component

This is the base component of this library, inside every RelatedBox component needs to be 2 other components, the RelatedBox.InputText and RelatedBox.SuggestionsBox, they complete the search input structure to work as expected.

If one of these components is not declared inside RelatedBox component it will result an error, they are not opitional, they are required.

import React from "react";
import { RelatedBox } from "react-related-box";

export default function MyComponent() {
  const allData = ["will", "mathew", "john", "maria"];
  const [query, setQuery] = useState("");
  const filteredData = allData.filter((name) => name.startsWith(query));

  return (
    <RelatedBox>
      <RelatedBox.InputText
        placeholder="Type something..."
        onChange={(value) => setQuery(value)}
      />
      <RelatedBox.SuggestionsBox
        data={filteredData}
        onSelectItem={(value) => console.log(value)}
        renderItem={(item) => <div style={{ padding: "5px 0px" }}>{item}</div>}
      />
    </RelatedBox>
  );
}

RelatedBox component props

RelatedBox contains all properties from normal JSX div component but with some additionals

property	required	type	default	description
objectKeyValue	❌	string	undefined	If your data prop from RelatedBox.SuggestionsBox component is an array of objects you can specify the object key that can be used to represent the selected value
clearOnSelect	❌	boolean	false	This property refers to what behavior the RelatedBox.InputText should have when user select an option, if true it will clear the input value

RelatedBox.InputText component props

RelatedBox.InputText contains all properties from normal JSX input component but with some additionals

property	required	type	default	description
typeDelay	❌	number	600	This property refers to the delay when user types something, if you do not want delay put it to 0
customInput	❌	React.ReactElement<InputHTMLAttributes>	none	If you want a custom text input you can use this property to create a custom input

RelatedBox.SuggestionsBox component props

RelatedBox.SuggestionsBox contains all properties from normal JSX div component but with some additionals

property	required	type	default	description
data	✅	any[]	none	This property refers to suggestions availables
renderItem	✅	(value: any) => React.ReactElement	none	This property refers to the component of each suggestion item, it return a property value that represent a item from data property, that way you can specify each property you want to use.
onSelectItem	✅	(value: any) => void	none	This property will return the selected item
customComponent	❌	(items: ReactElement[]) => void	none	This property can be used to render a custom suggestion box
maxItems	❌	number	4	This property refers to the max items from property data that will be presented as suggestions