https://github.com/leops/react-graph-editor

A React framework for building graph-based editors
https://github.com/leops/react-graph-editor

Last synced: 8 months ago
JSON representation

A React framework for building graph-based editors

• Host: GitHub
• URL: https://github.com/leops/react-graph-editor
• Owner: leops
• Created: 2016-11-24T17:36:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-15T10:47:02.000Z (over 9 years ago)
• Last Synced: 2024-04-26T21:03:53.896Z (about 2 years ago)
• Language: JavaScript
• Homepage: http://leops.github.io/react-graph-editor/
• Size: 19.5 KB
• Stars: 12
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
React Graph Editor

===============

Heavily based on [Draft.js](https://github.com/facebook/draft-js), React Graph Editor

is a framework for building graph-based editors like the [Rasen

Editor](https://github.com/leops/rasen-editor) or [Focus](https://github.com/leops/focus).

# Example

```js

import React from 'react';

import ReactDOM from 'react-dom';

import {

    Graph,

    GraphState,

} from 'react-graph-editor';

class Editor extends React.Component {

    constructor(props) {

        super(props);

        this.state = {graph: GraphState.createEmpty()};

        this.onChange = graph => this.setState({graph});

    }

    render() {

        const {graph} = this.state;

        return ;

    }

}

ReactDOM.render(

    ,

    document.getElementById('container')

);

```

# Docs

See the [docs](https://github.com/leops/react-graph-editor/tree/master/docs) folder.