react-validate-component 0.1.0 → 0.1.1-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -137
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,160 +1,110 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-validate-component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`react-validate-component`는 리액트 애플리케이션에서 입력 유효성 검사를 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 현재 `VText` 컴포넌트가 구현되어 있으며, 이 컴포넌트를 사용하여 간단하게 텍스트 입력의 유효성을 검사할 수 있습니다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 설치
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`react-validate-component` 라이브러리는 npm 또는 yarn을 통해 설치할 수 있습니다.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
|
|
12
|
-
|
|
13
|
-
The recommended workflow is to run TSDX in one terminal:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm start # or yarn start
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
|
|
20
|
-
|
|
21
|
-
Then run the example inside another:
|
|
9
|
+
### npm
|
|
22
10
|
|
|
23
11
|
```bash
|
|
24
|
-
|
|
25
|
-
npm i # or yarn to install dependencies
|
|
26
|
-
npm start # or yarn start
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
|
|
30
|
-
|
|
31
|
-
To do a one-off build, use `npm run build` or `yarn build`.
|
|
32
|
-
|
|
33
|
-
To run tests, use `npm test` or `yarn test`.
|
|
34
|
-
|
|
35
|
-
## Configuration
|
|
36
|
-
|
|
37
|
-
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
|
|
38
|
-
|
|
39
|
-
### Jest
|
|
40
|
-
|
|
41
|
-
Jest tests are set up to run with `npm test` or `yarn test`.
|
|
42
|
-
|
|
43
|
-
### Bundle analysis
|
|
44
|
-
|
|
45
|
-
Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
|
|
46
|
-
|
|
47
|
-
#### Setup Files
|
|
48
|
-
|
|
49
|
-
This is the folder structure we set up for you:
|
|
50
|
-
|
|
51
|
-
```txt
|
|
52
|
-
/example
|
|
53
|
-
index.html
|
|
54
|
-
index.tsx # test your component here in a demo app
|
|
55
|
-
package.json
|
|
56
|
-
tsconfig.json
|
|
57
|
-
/src
|
|
58
|
-
index.tsx # EDIT THIS
|
|
59
|
-
/test
|
|
60
|
-
blah.test.tsx # EDIT THIS
|
|
61
|
-
.gitignore
|
|
62
|
-
package.json
|
|
63
|
-
README.md # EDIT THIS
|
|
64
|
-
tsconfig.json
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
#### React Testing Library
|
|
68
|
-
|
|
69
|
-
We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
|
|
70
|
-
|
|
71
|
-
### Rollup
|
|
72
|
-
|
|
73
|
-
TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
|
|
74
|
-
|
|
75
|
-
### TypeScript
|
|
76
|
-
|
|
77
|
-
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
|
|
78
|
-
|
|
79
|
-
## Continuous Integration
|
|
80
|
-
|
|
81
|
-
### GitHub Actions
|
|
82
|
-
|
|
83
|
-
Two actions are added by default:
|
|
84
|
-
|
|
85
|
-
- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
|
|
86
|
-
- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
|
|
87
|
-
|
|
88
|
-
## Optimizations
|
|
89
|
-
|
|
90
|
-
Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
|
|
91
|
-
|
|
92
|
-
```js
|
|
93
|
-
// ./types/index.d.ts
|
|
94
|
-
declare var __DEV__: boolean;
|
|
95
|
-
|
|
96
|
-
// inside your code...
|
|
97
|
-
if (__DEV__) {
|
|
98
|
-
console.log('foo');
|
|
99
|
-
}
|
|
12
|
+
npm install react-validate-component
|
|
100
13
|
```
|
|
101
14
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
## Module Formats
|
|
105
|
-
|
|
106
|
-
CJS, ESModules, and UMD module formats are supported.
|
|
107
|
-
|
|
108
|
-
The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
|
|
109
|
-
|
|
110
|
-
## Deploying the Example Playground
|
|
111
|
-
|
|
112
|
-
The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
|
|
15
|
+
### yarn
|
|
113
16
|
|
|
114
17
|
```bash
|
|
115
|
-
|
|
116
|
-
npm run build # builds to dist
|
|
117
|
-
netlify deploy # deploy the dist folder
|
|
18
|
+
yarn add react-validate-component
|
|
118
19
|
```
|
|
119
20
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
21
|
+
## 사용법
|
|
22
|
+
|
|
23
|
+
현재 라이브러리에는 `VText` 컴포넌트가 포함되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
|
|
24
|
+
|
|
25
|
+
### VText 컴포넌트
|
|
26
|
+
|
|
27
|
+
`VText` 컴포넌트는 기본적인 텍스트 입력 필드와 유효성 검사 기능을 제공합니다.
|
|
28
|
+
|
|
29
|
+
#### 기본 사용 예제
|
|
30
|
+
|
|
31
|
+
```jsx
|
|
32
|
+
import React from 'react';
|
|
33
|
+
import { VText } from 'react-validate-component';
|
|
34
|
+
|
|
35
|
+
const App = () => {
|
|
36
|
+
const [message, setMessage] = React.useState('');
|
|
37
|
+
const [vState, setVState] = React.useState(false);
|
|
38
|
+
const [vMessage, setVMessage] = React.useState('');
|
|
39
|
+
|
|
40
|
+
React.useEffect(() => {
|
|
41
|
+
if (/[\d]/gim.exec(message)) {
|
|
42
|
+
setVState(true);
|
|
43
|
+
setVMessage('숫자는 입력이 안됩니다.');
|
|
44
|
+
} else {
|
|
45
|
+
setVState(false);
|
|
46
|
+
setVMessage('');
|
|
47
|
+
}
|
|
48
|
+
}, [message]);
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<section className={styles.layout}>
|
|
52
|
+
<h1>React-Validate-Component</h1>
|
|
53
|
+
<div>
|
|
54
|
+
<h2>VText</h2>
|
|
55
|
+
<VText
|
|
56
|
+
vState={vState}
|
|
57
|
+
vClassName={''}
|
|
58
|
+
vShowMessage={true}
|
|
59
|
+
vMessage={vMessage}
|
|
60
|
+
vIsInnerMessage={true}
|
|
61
|
+
vLocateMessage={'top-left'}
|
|
62
|
+
vMessageClass={styles.validation_message}
|
|
63
|
+
vIsAnimate={false}
|
|
64
|
+
props={{
|
|
65
|
+
onChange: (e: { target: { value: string } }) => {
|
|
66
|
+
setMessage(e.target.value);
|
|
67
|
+
},
|
|
68
|
+
placeholder: 'this is react-validate-component test.',
|
|
69
|
+
className: styles.input_text,
|
|
70
|
+
defaultValue: 'test',
|
|
71
|
+
}}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</section>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export default App;
|
|
127
79
|
```
|
|
128
80
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
|
|
132
|
-
|
|
133
|
-
## Including Styles
|
|
81
|
+
#### Props
|
|
134
82
|
|
|
135
|
-
|
|
83
|
+
- `vState` (boolean): 유효성 상태 값입니다.
|
|
84
|
+
- `vClassName` (string): 유효성 입힐 class 명입니다.
|
|
85
|
+
- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
|
|
86
|
+
- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
|
|
87
|
+
- `vIsInnerMessage` (boolean): 유효성 메시지를 element 안에 넣을지 (absolute 형태) 여부입니다.
|
|
88
|
+
- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): 유효성 메시지를 element 어디에 붙일지 위치값입니다.
|
|
89
|
+
- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
|
|
90
|
+
- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (개발중, 삭제될 수 있음)
|
|
91
|
+
- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
|
|
136
92
|
|
|
137
|
-
|
|
93
|
+
### 유효성 검사 규칙
|
|
138
94
|
|
|
139
|
-
|
|
95
|
+
- 지금은 사용자가 정규식 혹은 함수를 이용해 작성한 유효성검사 로직을 토대로 element에 출력하고 있습니다.
|
|
96
|
+
- 상단에 예시를 확인하여 주시기 바랍니다.
|
|
140
97
|
|
|
141
|
-
|
|
98
|
+
## 개발 중인 기능
|
|
142
99
|
|
|
143
|
-
|
|
100
|
+
- 현재 `VText` 컴포넌트만 구현되어 있으며, 다른 입력 유형에 대한 컴포넌트도 개발할 예정입니다.
|
|
101
|
+
- 추가적인 유효성 검사 규칙 및 에러 메시지 처리 기능이 계획되어 있습니다.
|
|
102
|
+
- 현재 문서에 이미지를 추가한 문서 업데이트 예정되어있습니다.
|
|
144
103
|
|
|
145
|
-
|
|
104
|
+
## 기여
|
|
146
105
|
|
|
147
|
-
|
|
106
|
+
기여를 원하시는 분은 언제든지 pull request를 제출하거나 이슈를 제기해 주세요. 코드 기여 및 피드백을 환영합니다!
|
|
148
107
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
```diff
|
|
152
|
-
"alias": {
|
|
153
|
-
- "react": "../node_modules/react",
|
|
154
|
-
- "react-dom": "../node_modules/react-dom"
|
|
155
|
-
+ "react": "../../../node_modules/react",
|
|
156
|
-
+ "react-dom": "../../../node_modules/react-dom"
|
|
157
|
-
},
|
|
158
|
-
```
|
|
108
|
+
## 라이센스
|
|
159
109
|
|
|
160
|
-
|
|
110
|
+
이 라이브러리는 [MIT 라이센스](LICENSE) 하에 배포됩니다.
|
package/package.json
CHANGED