WebShortsProvider

The main provider component that wraps your app and provides the WebShorts context to all child components.

Basic Usage

Wrap your entire application with the WebShortsProvider component:

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

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

Props Reference

The WebShortsProvider accepts several props to customize its behavior:

import shortcutsConfig from './webshorts.config.js';

<WebShortsProvider 
  config={shortcutsConfig}
  currentPage={pathname} 
  className='my-custom-class' 
  style={{ padding: '1rem' }} 
/>

Required Props

config

Shortcut configuration object

Optional Props

currentPage

Current page/route (default: '/')

className

CSS class name for styling

style

Inline styles object

Configuration Examples

Basic Setup

// Basic setup with config
import shortcutsConfig from './webshorts.config.js';

<WebShortsProvider config={shortcutsConfig} currentPage={pathname}>
  <YourApp />
</WebShortsProvider>

With Custom Config

// Explicit config import
import shortcutsConfig from './webshorts.config.js';

<WebShortsProvider config={shortcutsConfig} currentPage={pathname}>
  <YourApp />
</WebShortsProvider>

With Current Page

// Specify current page for route-based shortcuts
import shortcutsConfig from './webshorts.config.js';

<WebShortsProvider config={shortcutsConfig} currentPage={pathname}>
  <YourApp />
</WebShortsProvider>

With Styling

// Add custom styling
import shortcutsConfig from './webshorts.config.js';

<WebShortsProvider 
  config={shortcutsConfig}
  currentPage={pathname}
  className='my-custom-provider'
  style={{ padding: '1rem' }}
>
  <YourApp />
</WebShortsProvider>

Framework-Specific Examples

Next.js App Router

// components/WebShortsProviderWrapper.jsx
'use client';
import { WebShortsProvider } from '@chrisnski/webshorts';
import shortcutsConfig from './webshorts.config.js';

export default function WebShortsProviderWrapper({ children }) {
  return (
    <WebShortsProvider config={shortcutsConfig} currentPage={pathname}>
      {children}
    </WebShortsProvider>
  );
}

React Router

import { useLocation } from 'react-router-dom';
import shortcutsConfig from './webshorts.config.js';

function App() {
  const location = useLocation();
  
  return (
    <WebShortsProvider config={shortcutsConfig} currentPage={location.pathname}>
      <Router>{/* Your routes */}</Router>
    </WebShortsProvider>
  );
}

Context Usage

The WebShortsProvider creates a React context that provides shortcut functionality to all child components. Use the useShortcuts hook to access this context.

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

function MyComponent() {
  const { shortcuts, registerShortcut } = useShortcuts();
  
  // Use the context values
  return <div>My Component</div>;
}

Important Notes

• Must wrap your entire app - All components that need shortcuts must be children of WebShortsProvider
• Config required - You must provide a config prop with your shortcut configuration
• CurrentPage required - You must provide currentPage prop for proper route-based shortcuts
• Context provider - Creates React context for shortcut functionality