Introduction This article shows you how to implement the search functionality in the react navigation bar. It shows you how to configure the search input, listen to the user data entry callback, and then, how to style it. Prerequisites This article assumes that you have read the previous navbar tutorials. In case you haven’t you will find a consolidated list in the reference links section, at the end of the article. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, and have also customized your menu. This tutorial takes it forward from there. Step 1 - Show / Hide the Search Input To show the search input, set the showSearch prop to true, as shown: return (
        <div>
                <SfNav showSearch={true}/>
        </div>
); It renders as follows: To hide the search input, set the showSearch prop to false, as shown: return (
        <div>
                <SfNav showSearch={false} />
        </div>
); It renders as follows: Step 2 - Set the Search Input Caption To change the search caption, set the searchCaption prop to the appropriate string value, as shown: return (
        <div>
                <SfNav searchCaption="Find" />
        </div>
); It renders as follows: Step 3 - Set the Search Input Icon You can also add an icon to the search input. Simply set the searchIcon prop to the icon object. The icon object can be taken from any library. In the example below, I have used the bootstrap icons library. To change the search caption, set the searchCaption prop to the appropriate string value, as shown: npm install react-bootstrap-icons import {Search} from 'react-bootstrap-icons'; return (
        <div>
                <SfNav searchIcon={<Search />} />
        </div>
); It renders as follows: Step 4 - Handle the Callback The navigation bar returns a callback if the user enters some text in the search input and presses enter. You can subscribe to this callback by subscribing to the onSearchPressed prop, as shown: return (
        <div>
              <SfNav onSearchPressed={(value) => {alert(value)}}/>
        </div>
); Step 5 - Styling You can then customize the look and feel, by using inline CSS or by class names. The Superflows navigation bar exposes props that facilitate customization. An example is shown below: return (
        <div>
              <SfNav 
                  stylesSearchContainer={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
                  stylesSearchInput={{backgroundColor: '#444', borderRadius: '10px', color: '#efefef', paddingTop: '5px', paddingBottom: '5px'}}
              />
        </div>
); It renders as follows: Reference Links Documentation This link Code This link Previous Tutorials of Navbar T1: Getting Started With Navbar T2: Insert Brand Info T3: Customise Menu Video Tutorial https://www.youtube.com/watch?v=2mnL8fSgS80?embedable=true Further Reading You have already seen how to get started with the navigation bar, how to insert brand information into it, how to customize the menu, and now, how to configure the search input. The next tutorial will show you how to use and customize the sign-in button. Conclusion This article shows you how to configure the search input. How to show/hide it, how to change the caption, how to add an icon, how to handle callback, and how to customize and style it. Also published here.

This story contains new, firsthand information uncovered by the writer.

YouTube

Adding a 'Sign In' Button to your React Navbar

How to Give Your React Navbar Search Functionality

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Adding a Back Button to your React Navbar

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Adding a Back Button to your React Navbar

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps