open-index/open-npm huggingface dataset:
npm package: @john0504/react-authform
Description: react-authform react auth form
Latest version: 1.0.11

# Authentications form: React + @material-ui
Компоненте формы аутентификации (логин, регистрация, вспомнить пароль, выход).
<br>Использовался: [material-ui](https://material-ui.com/ru/).
<br>[Demo codesandbox.io](https://codesandbox.io/s/amazing-pike-dipok)
<br>![Demo picks](https://raw.githubusercontent.com/john050481/react-authform/master/demo_img/All.jpg)

# Getting started
```bash
# via GIT
git clone https://github.com/john050481/react-authform.git
cd react-authform
npm i
npm start
```
```bash
# via NPM (у себя в проекте)
npm i @john0504/react-authform
...
import {AuthForm} from "@john0504/react-authform";
```
# Основные моменты
## Основной компонент ```AuthForm```:
В Ваши колбеки (handleSignIn, handleSignUp, ...) передается объект события и данные формы: handleSignIn(event, formData)...
```jsx
<AuthForm 
  isAuth={isAuth}
  handleSignIn={ (e, formData) => {
    e.preventDefault(); 
    console.log('form data = ', formData)
  }}
  handleSignUp={...}
  handleForgotPass={...}
  handleSignOut={...}
/>
```
## Четыре формы: 
```
SignIn      /*Вход*/
SignOut     /*Выход*/
SignUp      /*Регистрация*/
ForgotPass  /*Забытый пароль*/
```
## Пропсы AuthForm:
Передаются из Вашего кода:
```js
AuthForm.propTypes = {
  isAuth: PropTypes.bool.isRequired,            /*признак авторизации*/
  handleSignIn: PropTypes.func.isRequired,      /*коллбэк при входе*/
  handleSignUp: PropTypes.func.isRequired,      /*коллбэк при регистрации*/
  handleForgotPass: PropTypes.func.isRequired,  /*коллбэк при забытом пароле*/
  handleSignOut: PropTypes.func.isRequired      /*коллбэк при выходе*/
};
```
В качестве примера коллбэк ```handleSignIn```, который выдает пары (ключ: значение) инпутов формы:
```js
handleSignIn: (e, formData) => {
  e.preventDefault();
  console.log(formData);
}
//Выведет в консоли то, что ввел пользователь:
email: email@corp.ru
password: anypass
remember: remember //если выставлена галочка 'запомнить' 
```
## Бонус, компонент который проверяет аутентификацию:
```
RequireAuth
```
Это компонент высшего порядка (Higher-Order Component, HOC).
<br>Компонент принимает на вход компонент, который должен быть показан только для авторизованного пользователя (используется Redux).
<br>Возвращает: или ```null``` или можно сделать редирект (нужно установить Роуты: ```npm i react-router-dom```).
npm package: @john0504/react-contextmenu
Description: React context menu. Custom menu items, callback function for all menus (delegation). Customizable style, disabled item by condition.
An example of use.
Author: john0504
Latest version: 2.0.1

# react-contextmenu
![menu demo](https://raw.githubusercontent.com/john050481/react-contextmenu/master/demo.png)

React context menu. Custom menu items, callback function for all menus (delegation). Customizable style, disabled item by condition.
An example of use.

# Example
[link to codesandbox!](https://codesandbox.io/s/john0504react-contextmenu-e211k)

# Getting started
```bash
# via npm
npm i @john0504/react-contextmenu
```
# Usage
```jsx
import ContextMenu from "@john0504/react-contextmenu";

/**
* items - array of object (items)
* @param {string} type - item/separator/submenu
* @param {string} title - title menu
* @param {string} data - return data from callback
* @param {string} icon - icon @fortawesome
* @param {string} className - className
* @param {string} submenu - if type 'submenu', array of item
*/
let items = [
  {
    type: "item",
    title: "Title item1",
    data: "dataFromCallback1",
    icon: "chalkboard-teacher",
    className:
      this.state.type === "anyType" ? "disabled" : "" /*type, name or value*/
  },
  { type: "separator" },
  {
    type: "submenu",
    title: "Title submenu1",
    icon: "hammer",
    className:
      this.state.name === "anyName" ? "disabled" : "" /*type, name or value*/,
    submenu: [
      {
        type: "item",
        title: "Title submenu1",
        data: "dataFromCallbackSub1",
        icon: "folder-plus"
      },
      {
        type: "submenu",
        title: "Title submenu2",
        data: "dataFromCallbackSub2",
        icon: "edit",
        submenu: [
          { type: "item", title: "Title subSubMenu1", data: "dataSubSubMenu1" },
          { type: "item", title: "Title subSubMenu2", data: "dataSubSubMenu2" },
          { type: "item", title: "Title subSubMenu3", data: "dataSubSubMenu3" }
        ]
      }
    ]
  },
  { type: "separator" },
  {
    type: "item",
    title: "Title item2",
    data: "dataFromCallback2",
    icon: "bookmark"
  }
];

...

/**
* ContextMenu - import component
* @param {boolean} visible - if this.state.visible === true, menu visible
* @param {function} hideMenu - function that hides the menu
* @param {array} pageXY - [x, y], coords click mouse (left and top)
* @param {array} items - [object] items menus
* @param {function} callbackOnClickMenu - callbackOnClickMenu for click menu item (return event & data)
*/
        <ContextMenu
          className={"react-contextmenu example-contextmenu-class"}
          visible={this.state.visible}
          hideMenu={ () => this.setState({ visible: false }) }
          pageXY={[this.state.pageXY[0], this.state.pageXY[1]]}
          items={items}
          callbackOnClickMenu={ (event, data) => {
            this.callbackOnClickMenu(event, data);
          }}
        />
```