Image Search Demo

Prerequisites

Before you start, ensure you have the following:

Install the Required Dependencies in your project:

npm motion/react lucid-react

Create a new Project on Unsplash and obtain your API keys. For reference, check Unsplash Documentation. Watch the video tutorial below:

Get Your API keys Access Key from Unsplash.

  NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=REPLACE_WITH_YOUR_ACCESS_KEY

You're almost done, just a few steps left.

After the installation of Framer Motion. Copy and Past the component ImageSearch.tsx Code from the Preview Examples.

Done!

Prop name	Type	Default	Description
type	'visible' \| 'invisible'	'visible'	Determines the initial visibility of the search bar.

Name	Credit For	Contact
Yakkshit	Component Developer