Preview the live demo here.
In this tutorial, we will build a ⌘K Search Modal, which is what it sounds like - a modal for searching content that can be opened by the ⌘K keyboard shortcut. The tutorial will be comprised of two parts:
- Part 1: The Assignment (the one you're reading)
- Part 2: My Implementation & Walkthrough
Part 2 will be released to the public on December 31st, one week from when Part 1 (this article) is published.
If you are reading this after both have been released already but want to practice building from scratch according to a list of requirements, try to force yourself to spend at least a week on Part 1 before looking at Part 2.
Otherwise, feel free to skip ahead to Part 2 to read the walkthrough of how I built this ⌘K Search Modal.
What we're building
For reference, here are some ⌘K Search Modals built by others:
We're going to be building a simple version of the ⌘K Search Modal with the following requirements:
- Clicking the toggle button or pressing
⌘Kkeyboard shortcut opens the modal
- Clicking outside or one of the search results hides the modal
- Changing the search input text automatically updates the search results
The end goal is a module that exports components SearchModalProvider and SearchModalToggle that clients can use to render a ⌘K Search Modal. Internally, it will render a component called SearchModal.
Clients (apps that depend this module) can use these components by:
- Wrap their app with SearchModalProvider
- Render SearchModalToggle wherever they want to display it
Clone or fork the Github repo for the skeleton code.
git clone https://github.com/rasreee/cmdk-search-tutorial-skeleton.git
From project root, install the dependencies, and run the app.
yarn install && yarn start
Given the skeleton code, implement SearchModalProvider, SearchModalToggle, and SearchModal.
Edit SearchModalProvider.tsx to implement SearchModalProvider according to the following requirements:
- Uses React Context API
- Holds state of the SearchModal
- Renders SearchModal
Edit SearchModalToggle.tsx to implement the toggle button component according to the following requirements:
- Toggles the modal open when either:
⌘Kkeyboard shortcut is pressed
- Button is clicked
- When hovered, the background color is darkened by 20%
- When clicked, the background color is darkened by 40%
For the left-most icon, you can use any icon you like. Otherwise, use the
search icon from heroicons.com.
Edit SearchModal.tsx to implement the search modal according to the following requirements:
- Changes to the input automatically updates the search results
- Clicking outside or selecting a search result hides the modal
- Users can press Tab to focus on the search result
- When a search result is focused, users can press Enter to select it
If you run into any issues with the tutorial, please feel free to open an issue against the Github repo.
Top comments (0)