Adding a Command Palette to Your Website

• react-arrow-key-navigation-hook

  1 16 0.0 JavaScript

  A React hook & associated functions to implement arrow key navigation through a component

  

  For this, we'll be using a handy React hook called react-arrow-key-navigation-hook.

• react-detect-click-outside

  1 58 2.6 TypeScript

  Detects clicks outside React components to close them. Also handles keypresses.

  You can create your own hook for this following this tutorial, however, for the sake of this tutorial I'll just use react-detect-click-outside.

• SurveyJS

  surveyjs.io

  sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• berry

  181 7,087 9.3 TypeScript

  📦🐈 Active development trunk for Yarn ⚒

  

  Using npx or yarn, create a new Next.js or React project

• React

  1,686 221,224 9.8 JavaScript

  The library for web and native user interfaces.

  

  Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.

• react-icons

  91 11,011 7.9 TypeScript

  svg react icons of popular icon packs

  

  While we're at it, let's also download some icons from React Icons, and import them up top.

• Next.js

  2,034 120,098 10.0 JavaScript

  The React Framework

  

  Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.

• monkeytype

  620 13,770 9.9 TypeScript

  The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.

  

  MonkeyType is an open-source, minimalistic, and customisable typing test. It's designed to be accessed from just your keyboard, eliminating the need to switch back and forth with your mouse.

• WorkOS

  workos.com

  sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• framer/motion

  43 21,984 9.8 TypeScript

  Open source, production-ready animation and gesture library for React

  

  Animations using Framer Motion

Suggest a related project