The dev.to project with GatsbyJS-12

Photo by Markus Spiske on Unsplash

Welcome to part-12 of the series. You can find part-11 here.

We will start to add the Search functionality in our blog. There are some gatsby plugin to add the search functionality, but we can add it with plain old react code.

I found this very good blog by Monica Powell to do it with react code.

Let’s first add the Search Bar by updating the index.js file as below. We are adding an input box to capture the user’s input.

index.js

Rest of the chapter is exclusive content and will be in my upcoming book Gatsby Cookbook. You can find more details about it here.

And our Search Bar is fully working now.

Fully working

This completes part-12 of the series. You can find part-13 here.

You can find the code for the same in this github repo.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learn Gatsby JS Online | 6 Best Courses in 2021

Leetcode 20. Valid Parentheses

Dockerize your Node.js application in a few simple steps

避 (Japanese Kanji) — evade, avoid, avert, ward off, shirk, shun

componentWillReceiveProps to React Hook

Introduction to JavaScript Objects {}

Javascript 1O1 series : Learn syntax, variables and datatypes

The Problem Solving Process Using Mocha Testing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Using Custom Controllers to Power a Next.js App

Learn core Redux — The easiest way you can imagine

Build a Network Monitoring Application using React.

Building an Instagram clone with TypeScript