Skip to content

cawfree/react-cola

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

react-cola

WebCola for React.

🚀 Getting Started

Using npm:

npm install --save react-cola

Using yarn:

yarn add react-cola

✍️ Example

Below is a basic example of how to define a simple renderLayout prop, which will be called whenever the layout has been updated by WebCola.

import React from 'react';
import WebCola from 'react-cola';
import { Line } from 'react-lineto';

export default () => (
  <WebCola
    renderLayout={layout => (
      <>
        {layout.groups().map(
          ({ bounds: { x, X, y, Y } }, i) => {
            const width = X - x;
            const height = Y - y;
            return (
              <div
                key={i}
                style={{
                  position: 'absolute',
                  left: x,
                  top: y,
                  width,
                  height,
                  backgroundColor: 'orange',
                  borderRadius: 5,
                  zIndex: -2,
                }}
              />
            );
          },
        )}
        {layout.links().map(
          ({ source, target }, i) => {
            const { x, y } = source;
            const { x: x2, y: y2 } = target;
            return (
              <Line
                key={i}
                x0={x}
                y0={y}
                x1={x2}
                y1={y2}
                borderColor="blue"
                zIndex={-1}
              />
            );
          },
        )}
        {layout.nodes().map(
          ({x, y, width, height, name }, i) => (
            <div
              key={i}
              style={{
                position: 'absolute',
                left: x - width * 0.5,
                top: y - height * 0.5,
                width,
                height,
                backgroundColor: 'red',
                borderRadius: 5,
              }}
            >
              {name}
            </div>
          ),
        )}
      </>
    )}
    nodes={[
      {
        width: 60,
        height: 40,
        name: 'a',
      },
      {
        width: 60,
        height: 40,
        name: 'b',
      },
      {
        width: 60,
        height: 40,
        name: 'c',
      },
      {
        width: 60,
        height: 40,
        name: 'd',
      },
      {
        width: 60,
        height: 40,
        name: 'e',
      },
      {
        width: 60,
        height: 40,
        name: 'f',
      },
      {
        width: 60,
        height: 40,
        name: 'g',
      },
    ]}
    links={[
      { source: 1, target: 2 },
      { source: 2, target: 3 },
      { source: 3, target: 4 },
      { source: 0, target: 1 },
      { source: 2, target: 0 },
      { source: 3, target: 5 },
      { source: 0, target: 5 },
    ]}
    groups={[
      { leaves: [0], groups: [1] },
      { leaves: [1, 2] },
      { leaves: [3, 4] },
    ]}
    width={540}
    height={760}
  />
);

Thanks to

@tgdwyer @fzembow

✌️ License

MIT

About

WebCola for React.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published