react-rnd-with-alignlines

React draggable/resizable with align lines while dragging or resizing.

This repository is a combination of react-rnd and react-dragline to fit our requirement. Thx to bokuweb and zcued for their excellent job.

This component is design to be fully controlled, and focus only on the Node elements' size and position.

It will be useful for building a page builder or something like it.

Install

NPM

npm install --save react-rnd-with-alignlines

Yarn

yarn add react-rnd-with-alignlines

Basic Usage

import React, { useState } from 'react';
import { Container, INode } from 'react-rnd-with-alignlines';

function Node({
  style,
  node,
}) {
  return <div style={style}>{JSON.stringify(node)}</div>;
}

const componentMap = { Node };

const nodes: INode[] = [
  {
    id: 'node1',
    position: {
      x: 150,
      y: 150,
      w: 150,
      h: 80,
    },
    // Container only require `id` and `position` props,
    // you can design your own render patterns and set whatever params you need here and use them in your render method.
    component: 'Node',
  },
  {
    id: 'node2',
    position: {
      x: 200,
      y: 200,
      w: 80,
      h: 80,
    },
    // For example, you can set `component` = Node or 'Node', and use them in your render method.
    component: Node,
  },
];

function Example() {
  const [nodes, setNodes] = useState<INode[]>(nodes);

  return (
    <Container
       nodes={nodes.map(node => ({
        ...node,
        render(props) {
          let Component = node.component;

          if (typeof Component === 'string') {
            Component = componentMap[Component] || Component;
          }

          return <Component {...props} />;
        }
      }))}
      onNodeMove={(nodeId, position, index) => {
        const nextNodes = [...nodes];
        nextNodes[index].position = position;
        setNodes(nextNodes);
      }}
    />
  )
}

API

TODO