Skip to content

Instantly share code, notes, and snippets.

@siddharthlatest
Last active July 11, 2021 08:04
Show Gist options
  • Save siddharthlatest/8d609171eb363b93e07e557d87607216 to your computer and use it in GitHub Desktop.
Save siddharthlatest/8d609171eb363b93e07e557d87607216 to your computer and use it in GitHub Desktop.
SearchBar UI component specification

SearchBar UI Component

Create a React component (say SearchBar) which creates a searchbar UI that searches on a provided dataset and displays the matches as suggestions.

The component's usage should look as follows:

<SearchBar
  data={[{..}, {..}]}
  fields={["email", "company"]}
  highlight={true}
  onQueryChange={(prev, next) => (console.log("prev and new search query values: ", prev, next))}
  query="Google"
/>

Explaining the props below:

Props Description Required (yes/no)
data An array of objects passed to the SearchBar component to search on. yes
fields An array of string values, fields within the data that should be searched on yes
highlight If true, highlight the matching text no, defaults to true
onQueryChange A callback function that provides the previous and current search query values of the searchbar input. This can be used to create side-effects no
query When specified, this presets the initial search query into the SearchBar component. no

What we're looking for:

  1. Reusability of the component (you can list out any assumptions you make here),
  2. Search should work in a case insensitive fashion, as well as on partial words,
  3. Good Ux: Take any popular search site as a Ux reference (e.g. google.com, amazon.in, flipkart.com). UI wise: choose your style, there are no restrictions, however, no need to go overboard as well.
  4. Share the solution as a codesandbox.io project.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment