react-jsoncanvas

A React application that renders data from the JSON Canvas format. For more information about JSON Canvas, visit jsoncanvas.org.

What is react-jsoncanvas?

react-jsoncanvas is a React application designed to facilitate the rendering of JSON Canvas files. It provides a set of React components that interpret and display JSON Canvas data in a visual format, in it's current state it is not a library, rather an example/some code to use to render a canvas with nodes and edges in .canvas format

Features

It aims to be lightweight and easy to integrate with React projects.
Provides basic structures and components for rendering JSON Canvas.

Current state/todo/needed

React for rendering components and D3 for handling zoom and drag/drop in canvas functionality is core in this implementation, and for now react-markdown is being used to render html from markdown.

A lot of functionality and logic is taken from the jsoncanvas repository and is being refactored to align more with React standards.

Current focus is as a jsoncanvas viewer/reader

How to Use

Copy/Paste the features/behaviour you need or follow steps below:

As a standalone Application

To get started with react-jsoncanvas, clone the repository with

git clone https://github.com/Digital-Tvilling/react-jsoncanvas.git

Install the dependencies with NPM

npm install

Start up the development environment

npm run dev

As a dependency (Experimental)

You can also import it in your project and use it as local dependency however it will likely only work in a development environment and fail the build process.

First clone the repository (As it's not available on NPM), ideally in your project root folder.

git clone https://github.com/Digital-Tvilling/react-jsoncanvas.git

You can install the library with a standard install command, but with providing the path to the library folder.

npm install ./react-jsoncanvas

You should now be able to see the module imported as a local dependency in your project package.json

"react-jsoncanvas": "file:react-jsoncanvas"

And be able to use it as any library, eg :

import { CanvasContent, Canvas, Node, Edge } from 'react-jsoncanvas'

How to Contribute

Contributions are welcome! If you're interested in improving react-jsoncanvas, feel free to submit pull requests.

License

react-jsoncanvas is MIT licensed. For more details, see the LICENSE file in the repository.

kovsky0 / react-jsoncanvas Goto Github PK