react-cmdk
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    react-cmdk

    A fast, accessible, and pretty React.js command palette component

    What is this?

    This is a installable component for the web development framework React.js. The package includes 1 component, and its TypeScript types. The goal of the component is to save web developers their time, and not make them have to build their own command palette component. Instead, they can just install this component, and get a out-of-the-box command palette that's fast accessible, and pretty.

    Screenshots

    Light mode and dark mode is updated through the machines theme settings.

    Light mode Dark mode
    CleanShot 2021-11-08 at 20 54 04@2x CleanShot 2021-11-08 at 20 54 13@2x

    Installation

    npm install react-cmdk
    

    Or if you'd rather use Yarn

    yarn add react-cmdk
    

    Usage

    import CMDK from "react-cmdk";
    import "react-cmdk/dist/index.css"
    
    const App = () => {
      const options = [
        {
          key: "general",
          label: "General",
          options: [
            {
              key: "create-project",
              label: "Create new project",
              shortcut: ["⇧", "⌘", "N"],
              href: "/project/new",
              icon: "Plus",
            },
            {
              key: "account",
              label: "My account",
              shortcut: ["⇧", "⌘", "A"],
              href: "/account",
              icon: "User",
            },
          ],
        },
      ];
    
      return (
        <>
          <CMDK options={options} />
          ...
        </>
      );
    };

    Types

    Props

    Name Type Default Required Description
    options CMDKOption[] undefined true List of options that'll show up in the command palette

    CMDKOption

    Name Type Default Required Description
    options CMDKOption[] undefined false A list of sub-options that'll show up in the command palette
    icon CMDKIcon[] undefined false A HeroIcon icon name
    shortcut string[] undefined false If available, enter the shortcut for this action here
    href string undefined false The link that the user will be sent to apon selection
    label string undefined true The text that'll show up on the option
    key string undefined true A unique key for the option

    CMDKIcon

    • X
    • Ban
    • Cog
    • CreditCard
    • Collection
    • Eye
    • Key
    • Map
    • Rss
    • Sun
    • Tag
    • Bell
    • Cake
    • Cash
    • Chat
    • Chip
    • Code
    • Cube
    • Film
    • Fire
    • Flag
    • Gift
    • Hand
    • Home
    • Link
    • Mail
    • Menu
    • Moon
    • Play
    • Plus
    • Search
    • Save
    • Star
    • Stop
    • User
    • Wifi
    • Check
    • Clock
    • Cloud
    • Globe
    • Heart
    • Inbox
    • Login
    • Logout
    • Minus
    • Pause
    • Phone
    • Reply
    • Scale
    • Share
    • Table
    • Trash
    • Truck
    • Users

    Maintainers

    Install

    npm i react-cmdk

    DownloadsWeekly Downloads

    2

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    4.99 MB

    Total Files

    10

    Last publish

    Collaborators

    • albingroen