NPM 套件

# Using npm
npm install @clipmind/mindmap

# Using yarn
yarn add @clipmind/mindmap

# Using pnpm
pnpm add @clipmind/mindmap

import { useEffect, useState } from 'react';
import { MindMapEditor, generateStore, loadFromMarkdown } from '@clipmind/mindmap';
import styled from 'styled-components';
import type { MindMapStore } from '@clipmind/mindmap';

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

export function MindmapDemo() {
  const [store, setStore] = useState<MindMapStore | null>(null);

  useEffect(() => {
    // generateStore is async to ensure fonts are loaded before layout calculation
    generateStore().then(s => {
      loadFromMarkdown('# Hello World\n\n## Item 1\n### Item 1.1\n## Item 2', s);
      setStore(s);
    });
  }, []);

  if (!store) {
    return <Container>{'Loading...'}</Container>;
  }

  return (
    <Container>
      <MindMapEditor store={store} />
    </Container>
  );
}