react-kbar

React kbar wrapper.

installation

npm install -S @jswork/react-kbar

usage

1. import css

   @import "~@jswork/react-kbar/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-kbar/dist/style.scss";
   
   body {
    font-family: Arial, Helvetica, sans-serif;
   }
   
   // customize your styles:
   $react-kbar-options: ()

2. import js

   import React from 'react';
   import ReactKbar from '../../src/main';
   import { createGlobalStyle } from 'styled-components';
   // import styled from 'styled-components';
   const GlobalStyleComp = createGlobalStyle`
    body{
      font-family: Arial, Helvetica, sans-serif;
    }
   `;
   
   const actions = [
    {
      id: 'blog',
      name: 'Blog',
      shortcut: ['b'],
      keywords: 'writing words',
      perform: () => (window.location.pathname = 'blog')
    },
    {
      id: 'contact',
      name: 'Contact',
      shortcut: ['c'],
      keywords: 'email',
      perform: () => (window.location.pathname = 'contact')
    }
   ];
   
   export default () => {
    return (
      <>
        <ReactKbar actions={actions}>
          <button>Cmd + K active ME 🦄</button>
        </ReactKbar>
        <GlobalStyleComp />
      </>
    );
   };
   

preview

• https://afeiship.github.io/react-kbar/

license

Code released under the MIT license.