# react-gate-duo

> This project was very little based on [react-gate](https://www.npmjs.com/package/react-gate) . Aims to be simple.

Latest version **1.1.3** (published 2021-01-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-gate-duo
pnpm add react-gate-duo
yarn add react-gate-duo
bun add react-gate-duo
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-01-20 |
| First published | 2020-08-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | joselevelsup |

## Links

- npm: https://www.npmjs.com/package/react-gate-duo
- npm.io page: https://npm.io/package/react-gate-duo

## Recent versions

- 1.1.3 (latest) — 2021-01-20
- 1.1.2 — 2021-01-20
- 1.1.1 — 2021-01-17
- 1.1.0 — 2021-01-17
- 1.0.0 — 2020-08-12

## README

# React Gate Duo

This project was very little based on [react-gate](https://www.npmjs.com/package/react-gate) . Aims to be simple.

### Install

```
npm install --save react-gate-duo
```


### Examples
```jsx 
import SimpleGate from "react-gate-duo";
// ...other imports here

// React Router Dom (with local credentials)
<Route path="/protected-route" render={props => (
	<SimpleGate localCredentials={{ username: "admin", password: "password" }}>
		<Component {...props} />	
	</SimpleGate>
)}>

// React Router Dom (with an authorization pass)
const isUserLoggedIn = () => {
	if(userSession && userLoggedInTime){
		return true;
	}

	return false;
}

<Route path="/protected-route" render={props => (
	<SimpleGate authorized={isUserLoggedIn()}>
		<Component {...props} />	
	</SimpleGate>
)}>
```

When using ``localCredentials`` prop, when logging in, `SimpleGate` sets a sessionId and sessionTime. The sessionId is generated randomly. The sessionTime is for a check to see if the visiting user has been to the site within the past 2 days. if not, the visiting user is redirected to a login form. Super simple and not styled. If so, the user is immediately passed to the child.


| Prop Name							 | Type																		 | Required?															 | Default |
|------------------------|-----------------------------------------|-----------------------------------------|---------|
| localCredentials			 | { username: string, password: string }  | If authorized prop not being used			 | none    |
| authorized						 | Function that returns a boolean				 | If localCredentials prop not being used | none		 |

### Styling

Each classname is in the `gateClasses` prop object. There is absolutely NO styling implemented by default so everything is up to you. 

| Gate Class Prop			           |	Type	 | Default |
|--------------------------------|---------|---------|
| inputClassName								 | String  | ""			 |
| formClassName									 | String  | ""			 |
| firstInputClassName						 | String  | ""			 |
| secondInputClassName					 | String  | ""      |
| submitButtonContainerClassName | String  | ""      |
| submitButtonClassName          | String  | ""      |

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