React Outliner Neo

A React and TypeScript-based outline editor component that supports hierarchical content organization with rich keyboard shortcuts.

Features

• Rich keyboard shortcuts
  • Enter: Create new sibling item
  • Tab: Indent item (increase level)
  • Shift + Tab: Outdent item (decrease level)
  • Alt + ↑: Move item up
  • Alt + ↓: Move item down
  • ↑/↓: Quick navigation between items
• Support for expanding/collapsing items
• Support for deleting items
• Dark mode support - Built-in CSS variables for seamless theme switching
• Markdown rendering - Optional markdown support for rich text formatting
• Drag and drop - Intuitive item reordering with visual feedback
• Read-only mode - Display-only mode for viewing outlines

Installation

pnpm i react-outliner-neo

Usage

import { Outliner } from "react-outliner-neo";
import { marked } from "marked";

const initialData = [
  {
    topic: "Root Node",
    children: [
      {
        topic: "**Bold text** and *italic text*",
        children: [
          {
            topic: "Child Node 1.1",
          },
        ],
      },
    ],
  },
];

function App() {
  const handleChange = (data) => {
    console.log("Outline data updated:", data);
  };

  // Optional: Enable markdown rendering
  const markdownRenderer = (text: string) => {
    return marked.parseInline(text);
  };

  return (
    <div className="dark"> {/* Add 'dark' class for dark mode */}
      <Outliner 
        data={initialData} 
        onChange={handleChange}
        markdown={markdownRenderer} // Enable markdown rendering
        readonly={false} // Set to true for read-only mode
      />
    </div>
  );
}

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | OutlineData[] | Required | Initial outline data | | onChange | (data: OutlineItem[]) => void | Optional | Callback when outline changes | | readonly | boolean | false | Enable read-only mode | | markdown | (text: string) => string | Optional | Markdown renderer function |

Data Structure

interface OutlineData {
  id?: string; // Auto-generated if not provided
  topic: string;
  children?: OutlineData[];
  expanded?: boolean; // Default: true
}

Styling & Theming

Dark Mode

Add the dark class to any parent element to enable dark mode:

<div className="dark">
  <Outliner data={data} />
</div>

Custom Styling

Import the CSS file and customize CSS variables:

import "react-outliner-neo/style.css";

:root {
  --primary-color: #3b35ab;
  --text-color: #1f2937;
  --bg-color: transparent;
  /* ... other variables */
}

.dark {
  --primary-color: #6b9ff3;
  --text-color: #f9fafb;
  /* ... dark mode variables */
}

Tech Stack

• React 18
• TypeScript
• Vite
• TailwindCSS
• Lucide React (Icon library)

Development

pnpm dev

Build

pnpm build

Development Requirements

• Node.js >= 18
• pnpm >= 8