@getlinks/jslib

A React component library featuring navigation and UI components.

Installation

npm install @getlinks/jslib

Usage

Navigation Component

import React from 'react';
import { Navigation } from '@getlinks/jslib';
import '@getlinks/jslib/styles';

const App = () => {
  const navItems = [
    { id: 'home', label: 'Home', href: '/', active: true },
    { id: 'about', label: 'About', href: '/about' },
    { id: 'contact', label: 'Contact', href: '/contact' },
  ];

  const actions = (
    <div>
      <button>Login</button>
      <button>Sign Up</button>
    </div>
  );

  return (
    <Navigation
      brand="My App"
      items={navItems}
      actions={actions}
      variant="default"
      sticky
      bordered
    />
  );
};

export default App;

Components

Navigation

A flexible navigation bar component with support for branding, navigation items, and actions.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | brand | React.ReactNode | - | Brand/logo text or component | | items | NavigationItem[] | [] | Navigation items | | actions | React.ReactNode | - | Actions to display on the right side | | className | string | '' | Custom CSS class | | variant | 'default' \| 'dark' \| 'light' | 'default' | Navigation variant | | sticky | boolean | false | Make navigation sticky | | bordered | boolean | true | Show border bottom |

NavigationItem

interface NavigationItem {
  id: string;
  label: string;
  href?: string;
  onClick?: () => void;
  active?: boolean;
  disabled?: boolean;
}

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch for changes
npm run dev

# Run tests
npm test

License

ISC