Integrations

GraphJS in React

To Use GraphJS with in your React application as components, Please check react-graphjs repo for more information

Installation :

react-graphjs is available as an npm package.

npm install --save react-graphjs
or 
yarn add react-graphjs
                                        

To get started with Graph.js, you need to include graph.js file to your project. Then you have to initiate it with GraphJS.init function in your html file like shown below example.

    <script src="https://graphjs.com/v2/graph.js"></script>
    <script>
    GraphJS.init("{{YOUR-PUBLIC-ID}}", {
        host:  "{{URL-OF-GRAPHJS-INSTANCE}}",
        theme: "{{YOUR-THEME-PREFERENCE}}",
        color: "{{YOUR-COLOR-PREFERENCE}}",
        language: "{{YOUR-LANGUAGE-OF-CHOICE}}",
        defaultAvatar: "{{URL-TO-YOUR-DEFAULT-AVATAR}}"
    })
    </script>
                                        

The init function comes with three options:

host: a URL pointing to your instance of GraphJS-Server
theme: either 'light' or 'dark'
color: a string representing any color of your preference in HEX format
language: current available options are en-US (English), fr-FR (French) in beta and tr-TR (Turkish). For more translations and languages, see Translations section below.
defaultAvatar: either "gravatar" so all no-avatar accounts show with their Gravatar counterparts (if it exists) or a URL that points to your default avatar in png, gif or jpeg formats.

Usage :

import React from 'react';
import ReactDOM from 'react-dom';
import { GraphJSAuthRegister } from 'react-graphjs';
function App() {
return (
    <GraphJSAuthRegister 
        title="Register"
    >
    </GraphJSAuthRegister>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
                                        

For all the GraphJS tags, just capitalize the tag name in PascalCase and use it as a Component.

Example: graphjs-profile-card => GraphJSProfileCard