# reusable-react-components-br-hir

> This package is reusable react component

Latest version **0.1.27** (published 2024-01-27) · 0 weekly downloads

## Install

```sh
npm install reusable-react-components-br-hir
pnpm add reusable-react-components-br-hir
yarn add reusable-react-components-br-hir
bun add reusable-react-components-br-hir
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.27 |
| Published | 2024-01-27 |
| First published | 2023-11-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | br-hir |
| Maintainers | br_hiroki |
| Keywords | input, numberInput, checkbox, pulldown, radiobutton |

## Links

- npm: https://www.npmjs.com/package/reusable-react-components-br-hir
- npm.io page: https://npm.io/package/reusable-react-components-br-hir

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.3.2

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 0.1.27 (latest) — 2024-01-27
- 0.1.26 — 2024-01-17
- 0.1.25 — 2024-01-17
- 0.1.24 — 2024-01-13
- 0.1.23 — 2023-12-07
- 0.1.22 — 2023-12-07
- 0.1.21 — 2023-12-05
- 0.1.20 — 2023-11-29
- 0.1.19 — 2023-11-23
- 0.1.18 — 2023-11-22
- 0.1.17 — 2023-11-21
- 0.1.16 — 2023-11-21
- 0.1.15 — 2023-11-21
- 0.1.14 — 2023-11-18
- 0.1.13 — 2023-11-18
- … 12 more at https://npm.io/package/reusable-react-components-br-hir/versions

## README

# Reusable React Component with validate

## TOC


## Overview
Provides an element with validate functionality added to the HTML element  
(HTML要素にvalidateの機能を付け加えた要素を提供します)  
How does the element show  
(要素は以下に示します)

* InputElement
* NumberInputElement
* CheckBoxElement
* PullDownElement
* RadioButton

## Build with
* React

## Installing

* `npm install reusable-react-components-br-hir`  
  (`yarn add reusable-react-components-br-hir`)
* Once the package is installed, you can import the library using import or require approach:
 ```
import { ValidatedPullDown } from 'reusable-react-components-br-hir'
```
* Use the following elements
    1. ValidatedTextInput
    2. ValidatedNumberInput
    3. ValidatedCheckBox
    4. ValidatedPullDown
    5. ValidatedRadioButton

## Example

```
import { useRef, useState } from 'react'
import {
  ValidatedCheckBox,
  ValidatedNumberInput,
  ValidatedPullDown, ValidatedRadioButton,
  ValidatedTextInput
} from 'reusable-react-components-br-hir'
import { validate } from './util.tsx'
import plane from './assets/plane.png'


function App() {
// Create a state to put the value in
  const [textValue, setTextValue] = useState('')
// Added ref option to validate check
  const textInputRef = useRef<any>()

  const [onChangeTextValue, setOnChangeTextValue] = useState('')
  const onChangeTextValueRef = useRef<any>()

  const [numberValue, setNumberValue] = useState('')
  const numberValueRef = useRef<any>()

  const [arrayCheckBoxValue, setArrayCheckBoxValue] = useState<string[]>([])
  const checkboxValueRef = useRef<any>()

  const [pullDownValue, setPullDownValue] = useState('')
  const [selectValues, setSelectValues] = useState<string[]>([])
  const pullDownValueRef = useRef<any>()

  const [radioButtonValue, setRadioButtonValue] = useState('')
  const radioButtonValueRef = useRef<any>()

// Create a function to validate check when the button is pressed
  const confirm = () => {
    const isValid = validate([textInputRef, onChangeTextValueRef,numberValueRef,checkboxValueRef,pullDownValueRef,radioButtonValueRef])
    alert(isValid ? 'Valid' : 'Not Valid')
  }

  return (
      <div>
        // ValidatedTextInput component where validate fires on onChange
        <ValidatedTextInput
          id='EagerTextInput'
          // If you want to check validation with a confirmation button, etc., pass a ref object to the ref option and execute the process later.
          ref={onChangeTextValueRef}
          label='Eager Text Input Validation'
          placeholder='text place holder'
          value={onChangeTextValue}
          onChange={setOnChangeTextValue}
          // Write the conditions to validate as an array
          validations={[
            [(value: string) => value.length < 5, 'Too Long'],
            [(value: string) => value.length > 1, 'Too short'],
          ]}
        />
        // ValidatedTextInput component that uses isNotOnChangeValidate to fire validation in onBlur
        <ValidatedTextInput
          id='gerTextInput' 
          ref={textInputRef}
          label='lazy Text Input Validation'
          placeholder='text place holder'
          value={textValue}
          onChange={setTextValue}
          // Since isNotOnChangeValidate is true, validate is fired in the onBlur event.
          onBlur={() => {
            console.log('onBlur')
          }}
          validations={[
            [(value: string) => value.length < 5, 'Too Long'],
            [(value: string) => value.length > 1, 'Too short'],
          ]}
          maxLength={5}
          // Validate is usually fired in the onChange event, but textInput can be validated at any time
          isNotOnChangeValidate={true}  //nameがきになる
        />
        // ValidatedNumberInput component that only allows input of numbers
        <ValidatedNumberInput
          id='numberInputId'
          ref={numberValueRef}
          label='validatedNumberValue'
          placeholder='mber input text' value={numberValue}
          onChange={setNumberValue}
          validations={[
            [(value: string) => value < '5', 'warning'],
          ]}
          // If the thousand separator is set to true, the notation will be as follows.
          // 10000000->10,000,000
          thousandSeparatorMode={true}
        />
        // ValidatedCheckBox component with validate function
        <ValidatedCheckBox
          id='checkBoxId'
          label='checkBoxLabel'
          ref={checkboxValueRef}
          value={arrayCheckBoxValue}
          onChange={setArrayCheckBoxValue}
          // Enter the elements you want to display in the check box as an array.
          options={['item1', 'item2', 'item3']}
          validations={[
            [
              (value: string[]) => {
                return value.includes('item1')
              },
              'warning',
            ],
          ]}
        />
        //  component with validate function
        <ValidatedPullDown
          id='pullDownId'
          ref={pullDownValueRef}
          // Value entered by user
          value={pullDownValue}  
          // event handler when user enters
          onChange={setPullDownValue}   
          // selected value
          selectValues={selectValues}
          // Event handler when user selects
          onSelectValues={setSelectValues}
          // Set in object format to display as a list
          // If you want to insert an image, please enter the path in optionPath
          options={[{ optionName: 'test1',optionPath:plane }, { optionName: 'option2' }]}
          validations={[
            [(value: string) => value < '5', 'warning'],   //selectValueにするべき
          ]}
        />
        // ValidatedRadioButton component with validate function
        <ValidatedRadioButton
          id='radioButtonId'
          ref={radioButtonValueRef}
          name='radioButton'
          value={radioButtonValue}
          onChange={setRadioButtonValue}
          options={['test1', 'option2' ]}
          validations={[
            [(value: string) => value < 'test1', 'warning'],
          ]}
        />
        <button onClick={confirm}>Confirm</button>
      </div>
  )
}

export default App
```
validate function that runs on confirm
```
import { RefObject } from 'react'

export const validate = (validatableInputList: RefObject<any>[]) =>
  validatableInputList
    .map((ref) => {
      try {
      // If you run ref?.current?.triggerValidation(true), validate will run at any timing.
        ref?.current?.triggerValidation(true)
        return true
      } catch (e) {
        return false
      }
    })
    .every((bool) => bool)
```
****

## Note

### Style change
syntax mark down
* case by validation style change case
```
.withValidationContainer {
  .errorMessage {
    color: black;
  }
}
error massage以外のstyleは必要ない
div でwrapしてそのdivにかける
```
pulldown -> dropdown change
* case by pulldown style change
```
.optionContainer {
  &:hover {
    background-color: pink;
  }
}
```

## npm upload
syntax mark down
1. Introduce npm to the package (project) to be created  
   (作成するパッケージ(プロジェクト)にnpmを導入)  
   `npm init`
2. Set the following options in the created package.json  
   (作成されたpackage.jsonに以下のオプションを記入)
```
{
  "name": "reusable-react-components-br-hir",
  "version": "0.0.0",
  "description": "This package explain",
  "main": "index.js",
  "types": "dist/main.d.ts",  // type script project
  ...
}
```
3. project build
4. npm login  
   `npm login`
5. npm upload  
   `npm publish --access=public`

****
**When updating a package (project), update the version.**  
(パッケージ(プロジェクト)をアップデートするときはpackage.jsonに記述したversionを更新)

## Author
* BR-hir

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