Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit e0b3b28 Jun 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fix for npm module May 27, 2019
lib Fix for npm module May 27, 2019
test Fix for npm module May 27, 2019
.babelrc Fix for npm module May 27, 2019
.gitignore Initial working copy Nov 6, 2018
LICENSE Create LICENSE Nov 7, 2018
README.md Readme Update May 22, 2019
package.json Fix for npm module May 27, 2019
webpack.config.js Fix for npm module May 27, 2019

README.md

react-graphjs

react-graphjs is the official React integration for GraphJS as Components

About GraphJS

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.

You can’t perform that action at this time.