GraphJS is a Javascript client-side library to help developers easily enable social features on their web sites. GraphJS is built upon the Phở framework, and it's open source. With only a few lines of code, you can easily add authentication, comments, messages, forum, groups, profiles etc. to your static web pages or React application.

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.

<html>
  <head>
    <title>GraphJS for React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./app.js"></script>
    <script src="https://graphjs.com/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>
  </body>
</html>

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 to GraphJSProfileCard

For more Information/Options/Examples, please go to GraphJS official Documentation

Testing

To test this module in your local, clone this repo and run

npm install

or
 
yarn install

then run

npm run build

Now open the test/index.html in your browser to check all the components available.

License

GNU Affero General Public License v3.0, see LICENSE.

FAQs

What is chaituvr-react-graphjs-test?

Is chaituvr-react-graphjs-test well maintained?

Package last updated on 27 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install