@micahgoodman/sidebar

A reusable sidebar layout component for React with searchable list and detail view.

Features

📋 Searchable List - Built-in search with filtering
✅ Selection Management - Track selected items
🎨 Customizable - Full control over rendering and styling
📱 Type Safe - Full TypeScript support
🔌 Zero Dependencies - Only requires React

Installation

npm install @micahgoodman/sidebar

Quick Start

import { SidebarLayout, SidebarList } from '@micahgoodman/sidebar';

// Define your list item component
const MyListItem = ({ item, isSelected, onSelect }) => (
  <div
    onClick={onSelect}
    style={{ 
      padding: '12px',
      backgroundColor: isSelected ? '#f0f0f0' : 'white',
    }}
  >
    {item.title}
  </div>
);

function App() {
  const items = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
  const [selectedId, setSelectedId] = useState(null);

  return (
    <SidebarLayout
      SidebarComponent={
        <SidebarList
          items={items}
          selectedId={selectedId}
          onSelect={setSelectedId}
          onAddNew={() => console.log('Add new')}
          config={{
            addButtonLabel: '+ New Item',
            searchPlaceholder: 'Search items...',
            emptyStateText: 'No items yet',
            noResultsText: 'No results found',
            showSearchThreshold: 3,
          }}
          ItemComponent={MyListItem}
          filterItem={(item, query) => 
            item.title.toLowerCase().includes(query.toLowerCase())
          }
        />
      }
      DetailComponent={
        selectedId ? <div>Detail view for {selectedId}</div> : <div>Select an item</div>
      }
    />
  );
}

API

<SidebarLayout>

Two-column layout with sidebar and detail view.

| Prop | Type | Required | Description | |------|------|----------|-------------| | SidebarComponent | React.ReactNode | ✅ | Content for sidebar | | DetailComponent | React.ReactNode | ✅ | Content for detail view |

<SidebarList<T>>

Searchable list with add button.

| Prop | Type | Required | Description | |------|------|----------|-------------| | items | SidebarListItem<T>[] | ✅ | List items | | selectedId | string \| null | ✅ | Selected item ID | | onSelect | (id: string) => void | ✅ | Selection handler | | onAddNew | () => void | ✅ | Add button handler | | config | SidebarListConfig | ✅ | Configuration | | ItemComponent | React.ComponentType<...> | ✅ | List item component | | filterItem | (item, query) => boolean | ✅ | Filter function |

TypeScript

import type {
  SidebarLayoutProps,
  SidebarListProps,
  SidebarListConfig,
  SidebarListItem,
} from '@micahgoodman/sidebar';

License

MIT