https://github.com/ssshooter/react-outliner
A react logseq-like outliner
https://github.com/ssshooter/react-outliner
outliner react
Last synced: 3 months ago
JSON representation
A react logseq-like outliner
- Host: GitHub
- URL: https://github.com/ssshooter/react-outliner
- Owner: SSShooter
- Created: 2025-02-14T11:22:04.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-06-06T10:27:39.000Z (4 months ago)
- Last Synced: 2025-07-15T05:02:13.262Z (3 months ago)
- Topics: outliner, react
- Language: TypeScript
- Homepage: https://react-outliner-neo.netlify.app/
- Size: 192 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Outliner Neo
一个基于 React 和 TypeScript 开发的大纲编辑器组件，支持层级结构的内容组织和丰富的快捷键操作。
## 功能特点
- 丰富的键盘快捷操作
- Enter: 创建新的同级条目
- Tab: 缩进条目（增加层级）
- Shift + Tab: 减少缩进（减少层级）
- Alt + ↑: 向上移动条目
- Alt + ↓: 向下移动条目
- ↑/↓: 在条目间快速导航
- 支持条目的展开/折叠
- 支持条目的删除操作
## 安装
```bash
pnpm i react-outliner-neo
```
## 使用方法
```tsx
import { Outliner } from "react-outliner-neo";
const initialData = [
{
topic: "根节点",
children: [
{
topic: "子节点1",
children: [
{
topic: "子节点1.1",
},
],
},
],
},
];
function App() {
const handleChange = (data) => {
console.log("大纲数据已更新:", data);
};
return ;
}
```
## 技术栈
- React 18
- TypeScript
- Vite
- TailwindCSS
- Lucide React (图标库)
## 开发
```bash
pnpm dev
```
## 构建
```bash
pnpm build
```
## 开发环境要求
- Node.js >= 18
- pnpm >= 8