# g6reactcomponent

> React Compomenet Boilerplate

Latest version **0.2.0** (published 2018-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install g6reactcomponent
pnpm add g6reactcomponent
yarn add g6reactcomponent
bun add g6reactcomponent
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-05-02 |
| First published | 2018-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 20.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | “Gate6” |
| Maintainers | sadiquepoolwalagate6 |
| Keywords | react, react, component, login, component |

## Links

- npm: https://www.npmjs.com/package/g6reactcomponent
- Repository: https://github.com/gate6/g6reactcomponent
- Homepage: https://github.com/gate6/g6reactcomponent#readme
- Issues: https://github.com/gate6/g6reactcomponent/issues
- npm.io page: https://npm.io/package/g6reactcomponent

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^15.5.4
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.24.1
- [babel-core](https://npm.io/package/babel-core.md) ^6.24.1
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.9
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.0.0
- [style-loader](https://npm.io/package/style-loader.md) ^0.20.1
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.5.1
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) ^6.24.1
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.23.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2018-05-02
- 0.1.9 — 2018-05-02
- 0.1.8 — 2018-04-10
- 0.1.7 — 2018-04-10
- 0.1.6 — 2018-04-10
- 0.1.5 — 2018-04-10
- 0.1.4 — 2018-04-10
- 0.1.3 — 2018-04-09
- 0.1.2 — 2018-04-06
- 0.1.1 — 2018-04-06
- 0.1.0 — 2018-04-06

## README

# 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:
```javascript
$ `npm install --save g6reactcomponent`
```

To update existing g6reactcomponent component
```javascript
$ `npm update g6reactcomponent`
```

## How to use Login Form Component

Import LoginForm component from g6reactcomponent
```javascript
import {LoginForm} from 'g6reactcomponent';
```
Define "config" variables. (handleSubmit is required, rest of the config settings are optional)
```javascript
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.
```javascript
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.
```javascript
<LoginForm config={config} />
```

Working Example

```javascript
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 <sadique.poolwala@gate6.com>

---
_Source: https://npm.io/package/g6reactcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._