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.