@jswork/react-kbar v1.0.3

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.