# keysho

> add keyboard shortcuts in seconds

Latest version **1.3.2** (published 2022-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install keysho
pnpm add keysho
yarn add keysho
bun add keysho
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2022-07-18 |
| First published | 2022-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 162.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | aakashadesara |
| Maintainers | aakashadesara |

## Links

- npm: https://www.npmjs.com/package/keysho
- Repository: https://github.com/aakashadesara/keysho
- Homepage: https://github.com/aakashadesara/keysho#readme
- Issues: https://github.com/aakashadesara/keysho/issues
- npm.io page: https://npm.io/package/keysho

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [animate.css](https://npm.io/package/animate.css.md) ^4.1.1
- [animate.css-react](https://npm.io/package/animate.css-react.md) ^1.1.0
- [react-animated-css](https://npm.io/package/react-animated-css.md) ^1.2.1

## Recent versions

- 1.3.2 (latest) — 2022-07-18
- 1.3.1 — 2022-07-18
- 1.3.0 — 2022-07-13
- 1.2.9 — 2022-07-13
- 1.2.8 — 2022-07-07
- 1.2.7 — 2022-07-07
- 1.2.6 — 2022-07-07
- 1.2.5 — 2022-07-07
- 1.2.4 — 2022-07-07
- 1.2.3 — 2022-07-06
- 1.2.2 — 2022-07-01
- 1.2.1 — 2022-07-01
- 1.2.0 — 2022-07-01
- 1.1.9 — 2022-07-01
- 1.1.8 — 2022-07-01
- … 16 more at https://npm.io/package/keysho/versions

## README

# ⚡️ Keysho for React

[![NPM](https://img.shields.io/npm/v/keysho.svg)](https://www.npmjs.com/package/keysho) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

##### Add ⌘ + K to your React app in less than 5 minutes

Keysho provides an SDK and no-code Admin panel to easily integrate and power a fast popup, omnibox experience for your customers and website visitors.

![Keysho GIF](./keysho.gif)

---

## Step 1. ⚡️ Build a Keysho

In order to get started, visit the [Keysho Admin Portal](https://aakashadesara.retool.com/embedded/public/e64f3a61-b7e9-468f-957a-003bfcefc46e#navigation_state=Home&searchTerm=). Create an account, and create a new project. Afterwards, customize the project to your liking. Current options include:

- Customizing Colors: Text, Accents, Subtext, etc
- Adding Links: Add hotlinks to URLs (i.e. www.github.com)
- Adding Actions: Add hooks to javascript actions (i.e. toggle dark mode, throw confetti)
- Remove Keysho Branding: removes the keysho branding in the bottom right of the Keysho omnibox

After creating a Keysho, go to the 'installations' tab to see next steps to get everything installed on your web app.

## Step 2. 🌊 Installation

You can install the Keysho package with the following line:

```bash
npm install keysho --force
```

## Step 3. 🚀 Basic Usage

After installing the package, you can embed Keysho into the root file of your application by doing the following:

```tsx
import { Keysho } from "keysho";
import "keysho/dist/index.css";

...

<Keysho
  config_uuid='b46acd46-e92c-11ec-995a-1eab7e003dc6'
/>
```

## Step 4. 🪄 Actions (optional)

If your Keysho consists of any actions, you'll need to do one extra step which is adding an action map by doing the following:

```tsx
const ACTION_MAP = {
  action_function_1: () => {} // implement action_function_1 here,
  action_function_2: () => {} // implement action_function_2 here
    ...
}
```

## Step 5. 🎊 You're done!

Hit `cmd` + `k` on your website and enjoy. Please tag me on Twitter at [@aakashadesara](https://www.twitter.com/aakashadesara) with your unique implementation of Keysho - I'd love to check it out!

## License

MIT © [aakashadesara](https://github.com/aakashadesara)

---
_Source: https://npm.io/package/keysho · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._