Search

Usage

This component is used to act as a minimal search box. The component provides you with a Search component, which can be imported and used. The results property passed into this component show up as the search results

Properties

NameTypeDefault
value

string

size

"small" | "medium"

medium
disabled

boolean

false
inverted

boolean

false
placeholder

string

Appearance

  • placeholder: This describes the text value to display as a placeholder in the search box
  • value: This describes the default value to be taken by the search box
  • results: The search results. This is an array of components (whatever you want to render as a result object)

You can navigate among the search results using your keyboard arrow keys. Upon navigating to an element and pressing Enter, the onClick function of that element is called.

Examples

Basic

const namesArray = ['Adam', 'Barry', 'Charles', 'David'];
const mapName = (name, index) => (
<Box key={index} height="2.5rem"display="flex" alignItems="center" onClick={() => alert(`${name} was clicked!`)}>
<Text marginLeft="1rem">{name}</Text>
</Box>
);
const names = namesArray.map(mapName);
const [results, setResults] = useState(names);
return (
<Search
width="20rem"
results={results}
onInputChange={val =>
setResults(namesArray.filter(name => name.toLowerCase().includes(val.toLowerCase())).map(mapName))
}
onClear={() => setResults(namesArray.map(mapName))}
/>
);

With Placeholder

const namesArray = ['Adam', 'Barry', 'Charles', 'David'];
const mapName = (name, index) => (
<Box key={index} height="2.5rem"display="flex" alignItems="center" onClick={() => alert(`${name} was clicked!`)}>
<Text marginLeft="1rem">{name}</Text>
</Box>
);
const names = namesArray.map(mapName);
return <Search width="12rem" placeholder="Search for a name" results={names} />;

Disabled

const options = [1, 2, 3, 4].map(item => <Text>{item}</Text>);
return <Search disabled width="12rem" results={options} />;

Integration with API

const searchAPI = (name: string) => `https://swapi.dev/api/people/?search=${name}`;
const mapName = ({ name }, index) => (
<Box key={index} height="2.5rem"display="flex" alignItems="center" onClick={() => alert(`${name} was clicked!`)}>
<Text marginLeft="1rem">{name}</Text>
</Box>
);
const fetchCharacter = async (name: string) => {
const response = await (await fetch(searchAPI(name))).json();
setResults(response.results?.map(mapName));
};
const [results, setResults] = useState([]);
return (
<Search
width="20rem"
placeholder="Enter a name"
results={results}
onInputChange={name => fetchCharacter(name)}
onClear={() => setResults([])}
/>
);

Variants

Medium (default)

Small

Playground