react-formr - npm Package Compare versions

Comparing version 1.0.6 to 1.0.10

lib/index.d.ts

@@ -1,4 +0,4 @@
-import Former from "./former";
+import Formr from "./formr";
 import * as Types from "./Types";
-export default Former;
+export default Formr;
 export { Types };

lib/index.js

@@ -1,4 +0,4 @@
-import Former from "./former";
+import Formr from "./formr";
 import * as Types from "./Types";
-export default Former;
+export default Formr;
 export { Types };

lib/Types.d.ts

@@ -15,9 +15,12 @@ export interface FormMessages {
 }
+export interface NullObject {
+    [key: string]: null;
+}
 export interface StringObject {
     [key: string]: string;
 }
-export interface FormerValidation {
+export interface FormrValidation {
     [key: string]: FormValidation;
 }
-export interface FormerProps {
+export interface FormrProps {
     children: any;
@@ -27,6 +30,13 @@ formFields: {
     };
-    validation?: FormerValidation;
+    validation?: FormrValidation;
     onChange?: () => object;
 }
-export interface FormerFunctions {
+export interface InputBinderProps {
+    onChangeText: (text: string) => void;
+    onBlur: () => void;
+    value: string;
+    valid: boolean;
+    touched: boolean;
+}
+export interface FormrFunctions {
     onHandleChange: Function;
@@ -38,2 +48,3 @@ onHandleBlur: Function;
     handleSubmit: Function;
+    inputBinder: Function;
 }

lib/utils.d.ts

@@ -1,3 +0,4 @@
-import { StringObject, BoolObject, FormValidation } from "./Types";
+import { StringObject, BoolObject, FormValidation, NullObject } from "./Types";
 export declare const validator: (type: string | undefined, value: string, rule?: string) => boolean;
 export declare const fieldBools: (obj: StringObject | FormValidation) => BoolObject;
+export declare const fieldNulls: (obj: StringObject | FormValidation) => NullObject;

lib/utils.js

@@ -26,1 +26,7 @@ import validatorFn from "validator";
 };
+export var fieldNulls = function (obj) {
+    return Object.keys(obj).reduce(function (acc, key) {
+        acc[key] = null;
+        return acc;
+    }, {});
+};

package.json

 {
   "name": "react-formr",
-  "version": "1.0.6",
+  "version": "1.0.10",
   "description": "Form managing component for React & React Native",
@@ -13,3 +13,3 @@ "main": "./lib/index.js",
     "type": "git",
-    "url": "git+https://github.com/ltsharma/react-former.git"
+    "url": "git+https://github.com/ltsharma/react-formr.git"
   },
@@ -29,3 +29,5 @@ "keywords": [
   "peerDependencies": {
-    "react": "^16.0,0",
+    "react": "^16.0.0"
+  },
+  "dependencies": {
     "validator": "~13.1.1"
@@ -35,5 +37,5 @@ },
     "@types/react": "^16.9.34",
-    "typescript": "^3.8.3",
-    "@types/validator": "^13.1.0"
+    "@types/validator": "^13.1.0",
+    "typescript": "^3.8.3"
   }
 }

README.md

 # react-formr
-React Former
-Centralised form managing & validation
+
+Centralised Solution for managing values & validation in react native
+
+# Installation
+
+Yarn \
+`yarn add react-formr` \
+NPM \
+`npm i --save react-formr`
+
+# Example Usage
+
+1. Import `Formr`
+
+```javascript
+import Formr from "react-formr";
+```
+
+2. Use it
+
+```javascript
+export const App = () => {
+  return (
+    <View>
+      <Formr
+        formFields={{ email: "", phone: "" }}
+        validation={{
+          email: { required: true, type: "email" },
+          phone: { type: "phone" },
+        }}>
+        {({
+          onHandleChange,
+          values,
+          onHandleBlur,
+          touched,
+          valid,
+          handleSubmit,
+        }) => {
+          <>
+            <TextInput
+              style={{
+                borderBottomColor: "black",
+                borderWidth: 1,
+                width: "100%",
+              }}
+              onChangeText={(e) => onHandleChange("email", e)}
+              onBlur={() => onHandleBlur("email")}
+              value={values.email}
+            />
+            {touched.email && !valid.email && <Text>Not valid</Text>}
+
+            <TextInput
+              style={{
+                borderBottomColor: "black",
+                borderWidth: 1,
+                width: "100%",
+              }}
+              onChangeText={(e) => onHandleChange("phone", e)}
+              onBlur={() => onHandleBlur("phone")}
+              value={values.phone}
+            />
+            {touched.phone && !valid.phone && <Text>Not valid</Text>}
+            <Button
+              onPress={() => handleSubmit(console.log)}
+              title="Submit"
+              color="#841584"
+            />
+          </>;
+        }}
+      </Formr>
+    </View>
+  );
+};
+```
+
+# Options
+
+## Formr props
+
+| Name         | Type                       | Default | Description                           | Example                                |
+| ------------ | -------------------------- | ------- | ------------------------------------- | -------------------------------------- |
+| `formFields` | `StringObject` (Object)    | {}      | Form fields values                    | `{email:""}`                           |
+| `validation` | `FormrValidation` (Object) | {}      | Form fields for validation            | `{email:{required:true,type:"email"}}` |
+| `onChange`   | Function                   | ()=>{}  | Function for observing fields changes |                                        |
+
+## Form control function args
+
+To control form fields, The `Formr` component will provide a function that include
+
+| Name             | Type                            | Usage                                        | Descripion                                                                                                               | Example                                                                                         |
+| ---------------- | ------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
+| `onHandleChange` | `Function`                      | `onHandleChange( key:string, value:string )` | To set value of the field, call this function with arguments: `key` - which input field to update. `value` to that field | ` <TextInput onChangeText={ (text)=> onHandleChange("email":text) } />`                         |
+| `onHandleBlur`   | `Function`                      | `onHandleBlur( key:string )`                 | To set which field is blurred, call this function with key on blurrEvent                                                 | `<TextInput onBlur={ ()=> onHandleBlur("email") } />`                                           |
+| `handleSubmit`   | `Function`                      | `handleSubmit( callback:(values)=>{} )`      | This handle submit button & validation flow. This is used to submit form.                                                | `<Button title="Submit" onPress={ ()=> handleSubmit( (values)=> submitFormToApi(values) ) } />` |
+| `values`         | `{ [key:string]:string, ... }`  | `values={ values[key] }`                     | Objct of field values, can be used for value input for the `TextInput`                                                   | `<TextInput value={values.email} />`                                                            |
+| `valid`          | `{ [key:string]:boolean, ... }` |                                              | Its is This object contains validation results,`true`:valid and `false`:validation fail.                                 | `{!valid.email && <Text> This fields is invalid </Text>}`                                       |
+| `touched`        | `{ [key:string]:boolean, ... }` |                                              | Its is used to show error message on validation fail.                                                                    | `{touched.email && !valid.email && <Text> This fields is invalid </Text>}`                      |

src/index.ts

@@ -1,4 +0,4 @@
-import Former from "./former";
+import Formr from "./formr";
 import * as Types from "./Types";
-export default Former;
+export default Formr;
 export { Types };

src/Types.ts

@@ -16,2 +16,5 @@ export interface FormMessages {
 }
+export interface NullObject {
+  [key: string]: null;
+}
 export interface StringObject {
@@ -21,14 +24,20 @@ [key: string]: string;
 
-export interface FormerValidation {
+export interface FormrValidation {
   [key: string]: FormValidation;
 }
 
-export interface FormerProps {
+export interface FormrProps {
   children: any;
   formFields: { [key: string]: string };
-  validation?: FormerValidation;
+  validation?: FormrValidation;
   onChange?: () => object;
 }
-
-export interface FormerFunctions {
+export interface InputBinderProps {
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  value: string;
+  valid: boolean;
+  touched: boolean;
+}
+export interface FormrFunctions {
   onHandleChange: Function;
@@ -40,2 +49,3 @@ onHandleBlur: Function;
   handleSubmit: Function;
+  inputBinder: Function;
 }

src/utils.ts

 import validatorFn from "validator";
-import { StringObject, BoolObject, FormValidation } from "./Types";
+import { StringObject, BoolObject, FormValidation, NullObject } from "./Types";
 export const validator = (
@@ -29,1 +29,7 @@ type: string = "",
   }, {});
+
+export const fieldNulls = (obj: StringObject | FormValidation) =>
+  Object.keys(obj).reduce((acc: NullObject, key: string) => {
+    acc[key] = null;
+    return acc;
+  }, {});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28096

increased by44.57%

Lines of code

554

increased by24.22%

Number of lines in readme file

99

increased by2375%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedvalidator@~13.1.1

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)