Quick Start

Get WebShorts up and running in your React project in just a few steps.

⚠️

Next.js App Router Users

Next.js requires additional configuration to work with WebShorts. See the page for important integration details.

1. Install WebShorts and Dependencies

Install WebShorts and let it automatically install the required dependencies:

npm i @chrisnski/webshorts
npx webshorts init

What the npx webshorts init command does:

  • • Creates a webshorts.config.js file in your project root
  • • Automatically installs @radix-ui/react-dialog and sonner as dependencies
  • • Detects your package manager (npm, yarn, or pnpm) to use the appropriate install command

Note: You must already have react and react-dom installed (required for all React projects).

2. Wrap your app with WebShortsProvider

import { WebShortsProvider, WebShortsDialog } from '@chrisnski/webshorts';
import shortcutsConfig from './webshorts.config.js';

function App() {
  return (
    <WebShortsProvider config={shortcutsConfig} currentPage={pathname}>
      <YourApp />
      <WebShortsDialog />
    </WebShortsProvider>
  );
}

Quick Notes

  • • Default styles are included automatically, but can be overridden.
  • • The config must be included!
  • • The currentPage prop must be included for proper route-based shortcuts!

3. Adding page-specific shortcuts (Optional)

When you want to add a shortcut that is page specific, you can do it in the config, or add a shortcut listener to the page/component the shortcut applies to.

import { ShortcutListener } from '@chrisnski/webshorts';

function MyPage() {
  const handleSave = () => {
    console.log('Saving...');
  };

  return (
    <div>
      <h1>My Page</h1>

      {/* Register shortcuts for this page */}
      <ShortcutListener keys='CTRL + S' action={handleSave} />
      <ShortcutListener keys='ALT + N' action={() => console.log('New item')} />

      {/* Your page content */}
    </div>
  );
}

Next Steps

At this point the install can be used as is, and managed from the webshorts config if you are using global shortcuts only.

For page specific shortcuts, it's recommended to continue to step 3 and use Shortcut Listeners.