Skip to content
  1. Tutorials

Ogma + React with Create React App

You can bootstrap your React application using create-react-app tool. We are providing several templates to use with it. With these templates, you can start from a simple application, that creates a visualisation and shows you some good practices:

  • where to put the files
  • how to instantiate Ogma
  • how to load the graph
  • how to listen to the events
  • where to put the styles
  • how to update the state of your application from Ogma
  • how to add UI elements to the visualisation (tooltips etc)

You may also want to check out the ogma-react wrapper for seamless integration between Ogma and React.

Usage

Javascript template:

sh
npx create-react-app my-app --template "@linkurious/ogma" --use-npm
cd my-app
npm install --save https://get.linkurio.us/api/get/npm/ogma/<VERSION>/?secret=<YOUR_API_KEY>

# or, with yarn
yarn create react-app my-app --template "@linkurious/ogma"
cd my-app
yarn add https://get.linkurio.us/api/get/npm/ogma/<VERSION>.tgz?secret=<YOUR_API_KEY>

TypeScript template:

sh
npx create-react-app my-app --template "@linkurious/ogma-ts" --use-npm
cd my-app
npm install --save https://get.linkurio.us/api/get/npm/ogma/<VERSION>/?secret=<YOUR_API_KEY>

# or, with yarn
yarn create react-app my-app --template "@linkurious/ogma-ts"
cd my-app
yarn add https://get.linkurio.us/api/get/npm/ogma/<VERSION>.tgz?secret=<YOUR_API_KEY>