add custom error handling

Author: anigenero

.npmignore

@@ -1,3 +1,4 @@
+.idea/
 src/
 node_modules/
 

README.md

@@ -11,6 +11,21 @@ Easy-to-use React hook for validating forms with the [class-validator](https://g
 npm install --save react-class-validator
 ```
 
+```typescript
+
+const validatorOptions: ValidatorContextOptions = {
+    onErrorMessage: (error): string => {
+        // custom error message handling (localization, etc)
+    }
+}
+
+render((
+    <ValidatorContext options={validatorOptions}>
+        <MyComponent />
+    </ValidatorContext>
+), document.getElementById('root'))
+```
+
 ## Usage
 
 ```typescript
@@ -32,7 +47,7 @@ class LoginValidation {
 ```
 
 ```typescript jsx
-const LoginForm = () => {
+const MyComponent = () => {
 
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-class-validator",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "React hook for validation with class-validator",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -0,0 +1,20 @@
+import {ValidationError} from "class-validator";
+import React, {createContext, FunctionComponent} from "react";
+
+export type OnErrorMessageHandler = (error: ValidationError) => string;
+export type ValidatorContextOptions = {
+    onErrorMessage: OnErrorMessageHandler;
+};
+
+const _getDefaultContextOptions = (): ValidatorContextOptions => ({
+    onErrorMessage: (error) => Object.keys(error.constraints).map((key) => error.constraints[key])[0]
+});
+
+export const ValidatorContext = createContext<ValidatorContextOptions>(null);
+
+export const ValidatorProvider: FunctionComponent<{ options?: ValidatorContextOptions }> =
+    ({options = _getDefaultContextOptions(), children}) => (
+        <ValidatorContext.Provider value={options}>
+            {children}
+        </ValidatorContext.Provider>
+    );

src/context.tsx

@@ -1,5 +1,8 @@
 import {validate} from 'class-validator';
-import {useState} from 'react';
+import {useContext, useState} from 'react';
+import {ValidatorContext} from "./context";
+
+export {ValidatorProvider, ValidatorContextOptions, OnErrorMessageHandler} from './context';
 
 type Newable<T> = {
     new(): T;
@@ -12,6 +15,8 @@ type UseValidationResult<T, K extends keyof T> = [ValidationFunction<T, K>, Vali
 
 export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>): UseValidationResult<T, K> => {
 
+    const {onErrorMessage} = useContext(ValidatorContext);
+
     const [validationErrors, setErrors] = useState<ValidationErrorMap<T, K>>({});
 
     const validateCallback: ValidationFunction<T, K> = async (payload, filter: K[] = []) => {
@@ -31,7 +36,7 @@ export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>)
             const validation: ValidationErrorMap<T, K> = errors.reduce(
                 (acc, value) => ({
                     ...acc,
-                    [value.property as K]: Object.keys(value.constraints).map((key) => value.constraints[key])[0]
+                    [value.property as K]: onErrorMessage(value)
                 }),
                 {} as ValidationErrorMap<T, K>
             );

src/index.ts

@@ -26,7 +26,7 @@
     "/**/*.spec.tsx"
   ],
   "include": [
-    "./src/**/*"
+    "./src/index.ts"
   ]
 }