Search bar component


1032.1.12 years ago4 years agoMinified + gzip package size for @opuscapita/react-searchbar in KB




SearchBar is suitable for both automatic filtering and searching.

There is two different use cases for the search bar:

  1. Search is started automatically after user's input.
  • In this case the user does not need to press the search icon (magnifier) to start the search and thus the icon is shown as gray with white background.
  • In this case the search bar should also have a parameter that can be used to adjust how many caharacters needs to be inputted after the search is started automatically. The default value for that parameter is 3 characters.
  • After the user has inputted the first character the search icon is changed to X -icon, which the user can click to clear all characters.
  1. Search is started only after the user clicks the search icon.
  • The search icon is shown in this case as white with dark gray background.
  • After the user has clicked the search icon the icon changes to X-icon, which the user can click to clear all characters.
  • If the user then modifies the inputted string, the X-icon is changed back to the search icon.
  • User should be able to move the keyboard focus to both input and icon area separately.


npm install @opuscapita/react-searchbar


View the DEMO

Change log

View the Change log

Migrate guide

View the Migrate guide between major versions



The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.


Prop name Type Default / Parameter Description
id string oc-react-searchbar ID prefix of HTML components
className string '' Component class
inputClassName string '' Class for input
defaultValue strings '' Default keyword
minChars number 0 Minimum chars allowed to search
tooltipDelay number 0 A millisecond delay amount to show and hide the tooltip once triggered.
allowEmptySearch bool false Enables search button even if the search query is empty
isDynamic boolean false Dynamic search enables automatic searching
isTooltipEnabled boolean false Is tooltip visible
onSearch function (keyword: string) Callback function for searched keyword
onClear function () Callback function for clearing keyword
translations object { tooltip: '', searchPlaceHolder: 'Search...' } Translations object

Code example

import React from 'react';
import SearchBar from '@opuscapita/react-searchbar';

export default class ReactView extends React.Component {
  render() {
    return (

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.