{"id":13531818,"url":"https://github.com/wobsoriano/solid-ninja-keys","last_synced_at":"2025-04-15T02:13:39.608Z","repository":{"id":57365886,"uuid":"455777549","full_name":"wobsoriano/solid-ninja-keys","owner":"wobsoriano","description":"Add cmd+k interface to your solid site","archived":false,"fork":false,"pushed_at":"2022-12-07T05:53:01.000Z","size":315,"stargazers_count":33,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-01T07:37:37.011Z","etag":null,"topics":["solid"],"latest_commit_sha":null,"homepage":"https://wobsoriano.github.io/solid-ninja-keys/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-05T04:48:38.000Z","updated_at":"2024-07-29T09:44:33.000Z","dependencies_parsed_at":"2023-01-23T15:40:13.142Z","dependency_job_id":null,"html_url":"https://github.com/wobsoriano/solid-ninja-keys","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-ninja-keys","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-ninja-keys/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-ninja-keys/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-ninja-keys/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/solid-ninja-keys/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877137,"owners_count":16554912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["solid"],"created_at":"2024-08-01T07:01:05.973Z","updated_at":"2024-10-01T08:52:03.878Z","avatar_url":"https://github.com/wobsoriano.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-ninja-keys\u0026background=tiles\u0026project=%20\" alt=\"solid-ninja-keys\"\u003e\n\u003c/p\u003e\n\n# solid-ninja-keys\n\nAdd `cmd+k` interface to your solid site. Built on top of [ninja-keys](https://github.com/ssleptsov/ninja-keys).\n\n## Quick start\n\nInstall it:\n\n```bash\npnpm add solid-ninja-keys # or npm or yarn\n```\n\nUse it:\n\n```tsx\nimport { createSignal } from 'solid-js'\nimport { NinjaKeys } from 'solid-ninja-keys'\n\nfunction App() {\n  const [isDark, setIsDark] = createSignal(false)\n  const hotkeys = [\n    {\n      id: 'Home',\n      title: 'Open Home',\n      hotkey: 'cmd+h',\n      mdIcon: 'home',\n      handler: () =\u003e {\n        console.log('navigation to home')\n      },\n    },\n    {\n      id: 'Theme',\n      title: 'Change theme...',\n      mdIcon: 'desktop_windows',\n      children: [\n        {\n          id: 'Light Theme',\n          title: 'Change theme to Light',\n          mdIcon: 'light_mode',\n          handler: () =\u003e {\n            setIsDark(false)\n          },\n        },\n        {\n          id: 'Dark Theme',\n          title: 'Change theme to Dark',\n          mdIcon: 'dark_mode',\n          keywords: 'lol',\n          handler: () =\u003e {\n            setIsDark(true)\n          },\n        },\n      ],\n    },\n  ]\n\n  return (\n    \u003cdiv\u003e\n      \u003cNinjaKeys isDark={isDark()} hotkeys={hotkeys} /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Props\n\nAll [attributes](https://github.com/ssleptsov/ninja-keys#attributes) from ninja-keys are available plus additional props below:\n\n| Field                | Default                     | Description                                                 |\n|----------------------|-----------------------------|-------------------------------------------------------------|\n| hotkeys          | `[]` | Array of [ninja actions](https://github.com/ssleptsov/ninja-keys#data)                                  |\n| isDark          | `false` | Apply dark theme                                 |\n\n## Methods\n\nYou can access ninja-keys methods anywhere in your app via `createNinjaKeys` primitive.\n\n| Name                | Arg                     | Description                                                 |\n|----------------------|-----------------------------|-------------------------------------------------------------|\n| `open`          | parent?: string | Open menu with parent, if null then open root menu                                |\n| `close`          | | Close menu                                |\n| `setParent`          | parent?: string | Navigate to parent menu                                |\n\nExample\n\n```tsx\nimport { createNinjaKeys } from 'solid-ninja-keys'\n\nconst {\n  open,\n  close,\n  setParent,\n} = createNinjaKeys()\n```\n\n## Styling\n\nIf you need more style control, use the [CSS variables](https://github.com/ssleptsov/ninja-keys#css-variables) available.\n\n## Icons\n\nBy default, components use icons from https://fonts.google.com/icons\n.\nTo add Material icons for your website, you need to add them to your HTML, for example\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/css?family=Material+Icons\u0026display=block\" rel=\"stylesheet\"\u003e\n```\n\nYou can also use `svg` or `img`. Please refer to the [icons docs](https://github.com/ssleptsov/ninja-keys#icons).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-ninja-keys","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fsolid-ninja-keys","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-ninja-keys/lists"}