Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wobsoriano/solid-ninja-keys
Add cmd+k interface to your solid site
https://github.com/wobsoriano/solid-ninja-keys
solid
Last synced: 24 days ago
JSON representation
Add cmd+k interface to your solid site
- Host: GitHub
- URL: https://github.com/wobsoriano/solid-ninja-keys
- Owner: wobsoriano
- License: mit
- Created: 2022-02-05T04:48:38.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T05:53:01.000Z (almost 2 years ago)
- Last Synced: 2024-09-01T07:37:37.011Z (2 months ago)
- Topics: solid
- Language: TypeScript
- Homepage: https://wobsoriano.github.io/solid-ninja-keys/
- Size: 308 KB
- Stars: 33
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-solid-js - Solid Ninja Keys
README
# solid-ninja-keys
Add `cmd+k` interface to your solid site. Built on top of [ninja-keys](https://github.com/ssleptsov/ninja-keys).
## Quick start
Install it:
```bash
pnpm add solid-ninja-keys # or npm or yarn
```Use it:
```tsx
import { createSignal } from 'solid-js'
import { NinjaKeys } from 'solid-ninja-keys'function App() {
const [isDark, setIsDark] = createSignal(false)
const hotkeys = [
{
id: 'Home',
title: 'Open Home',
hotkey: 'cmd+h',
mdIcon: 'home',
handler: () => {
console.log('navigation to home')
},
},
{
id: 'Theme',
title: 'Change theme...',
mdIcon: 'desktop_windows',
children: [
{
id: 'Light Theme',
title: 'Change theme to Light',
mdIcon: 'light_mode',
handler: () => {
setIsDark(false)
},
},
{
id: 'Dark Theme',
title: 'Change theme to Dark',
mdIcon: 'dark_mode',
keywords: 'lol',
handler: () => {
setIsDark(true)
},
},
],
},
]return (
)
}export default App
```## Props
All [attributes](https://github.com/ssleptsov/ninja-keys#attributes) from ninja-keys are available plus additional props below:
| Field | Default | Description |
|----------------------|-----------------------------|-------------------------------------------------------------|
| hotkeys | `[]` | Array of [ninja actions](https://github.com/ssleptsov/ninja-keys#data) |
| isDark | `false` | Apply dark theme |## Methods
You can access ninja-keys methods anywhere in your app via `createNinjaKeys` primitive.
| Name | Arg | Description |
|----------------------|-----------------------------|-------------------------------------------------------------|
| `open` | parent?: string | Open menu with parent, if null then open root menu |
| `close` | | Close menu |
| `setParent` | parent?: string | Navigate to parent menu |Example
```tsx
import { createNinjaKeys } from 'solid-ninja-keys'const {
open,
close,
setParent,
} = createNinjaKeys()
```## Styling
If you need more style control, use the [CSS variables](https://github.com/ssleptsov/ninja-keys#css-variables) available.
## Icons
By default, components use icons from https://fonts.google.com/icons
.
To add Material icons for your website, you need to add them to your HTML, for example```html
```
You can also use `svg` or `img`. Please refer to the [icons docs](https://github.com/ssleptsov/ninja-keys#icons).
## License
MIT