G6 React Component

Prerequisite

• Install Node

(if not installed) Open the official page for Node.js downloads (https://nodejs.org/en/download/) and download Node.js for Windows/Linux option Run the downloaded Node.js .msi Installer - including accepting the license, selecting the destination, and authenticating for the install. This requires Administrator privileges, and you may need to authenticate To ensure Node.js has been installed, run node -v in your terminal - you should get something like v6.9.5 Update your version of npm with npm install npm --global

Installation from scratch for new React Framework set-up

To use G6 React Component, please install any of the React framework from below url: https://reactjs.org/community/starter-kits.html

Installation with Existing React Framework

Go to your project directory and run following command:

$ `npm install --save g6reactcomponent`

To update existing g6reactcomponent component

$ `npm update g6reactcomponent`

How to use Login Form Component

Import LoginForm component from g6reactcomponent

import {LoginForm} from 'g6reactcomponent';

Define "config" variables. (handleSubmit is required, rest of the config settings are optional)

const config = {
	handleSubmit:this.handleSubmit,
	//Password Regex Check for at least 8 characters, including 1 uppercase and 1 number.
	passwordPattern: /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d$@$!%*#?&]{7,}\S$/,
	//Email Regex Check for Valid Email Format.
	emailPattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
	usernameLabel: 'Email',
	passwordLabel: 'Password',
	rememberMeLabel: 'Remember Me',
	usernameErrorText: 'Please enter valid Email',
	passwordErrorText: 'Please enter valid Password',
}

Create submit handle function.

constructor(props) {
	super(props);
	this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(user, status){
	//Here you will got user object and status
 	 console.log('response:', user, status);
}

Pass "config" variables in "props" of LoginForm component.

<LoginForm config={config} />

Working Example

import React from "react";
import {LoginForm} from 'g6reactcomponent';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(user, status){
        console.log(user, status);
    }
 	render() {
        const config = {
			handleSubmit:this.handleSubmit,
			//Password Regex Check for at least 8 characters, including 1 uppercase and 1 number.
			passwordPattern: /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d$@$!%*#?&]{7,}\S$/,
			//Email Regex Check for Valid Email Format.
			emailPattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
			usernameLabel: 'Email',
			passwordLabel: 'Password',
			rememberMeLabel: 'Remember Me',
			usernameErrorText: 'Please enter valid Email',
			passwordErrorText: 'Please enter valid Password',
        }
    	return <div>
			    <LoginForm config={config} />
    	</div>
  	}
}
export default App;

Author

Sadique [email protected]