Skip to content
React component that renders a family tree
TypeScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Updated dependencies & tsconfig Jul 26, 2019
.gitignore First commit (v0.0.1) Jan 2, 2019
.npmignore First commit (v0.0.1) Jan 2, 2019
LICENSE First commit (v0.0.1) Jan 2, 2019
README.md
index.d.ts First commit (v0.0.1) Jan 2, 2019
package-lock.json Updated dependencies & tsconfig Jul 26, 2019
package.json Updated dependencies & tsconfig Jul 26, 2019
tsconfig.json Updated dependencies & tsconfig Jul 26, 2019

README.md

react-family-tree

React component that renders a family tree. Demo.

Install

npm i -S react-family-tree

Usage

import ReactFamilyTree from 'react-family-tree';
import FamilyNode from './your-components/FamilyNode';

const WIDTH = 70;
const HEIGHT = 80;

<ReactFamilyTree
    nodes={[...]}
    rootId={rootId}
    width={WIDTH}
    height={HEIGHT}
    renderNode={(node) => (
        <FamilyNode
            key={node.id}
            node={node}
            style={{
                width: WIDTH,
                height: HEIGHT,
                transform: `translate(${node.left * (WIDTH / 2)}px, ${node.top * (HEIGHT / 2)}px)`,
            }}
        />
    )}
/>
You can’t perform that action at this time.