New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

minforms

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

minforms - npm Package Compare versions

Comparing version 0.0.3 to 0.0.5

2

dist/index.d.ts

@@ -1,1 +0,1 @@

export { MinForm } from './MinFormsWrapper';
export { MinForm } from "./MinFormsWrapper";

1

dist/MinForms.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />

constructor(props: MinFormsProps<V>);
componentWillReceiveProps(nextProps: MinFormsProps<V>): void;
/**

@@ -13,0 +14,0 @@ * Will validate values based on given `validation` - if there's any

11

dist/MinForms.js

@@ -78,3 +78,3 @@ "use strict";

else {
throw new Error("Input with a name '" + e.target.name + "' is emitting an onChange event using handleChange, but there's no value defined. Probably you misspelled input's name or you didn't provide correct value in initialValues");
throw new Error("Input with a name '" + e.target.name + "' is emitting an 'onChange' event using handleChange, but there's no value defined. Probably you misspelled input's name or you didn't provide correct value in initialValues");
}

@@ -93,2 +93,9 @@ }

}
MinForms.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.onValuesChange && nextProps.values) {
this.setState({
values: __assign({}, this.state.values, this.props.onValuesChange(this.state.values, nextProps.values))
});
}
};
MinForms.prototype.render = function () {

@@ -100,3 +107,3 @@ return this.props.render({

values: this.state.values,
onSubmit: this.onSubmit
submit: this.onSubmit
});

@@ -103,0 +110,0 @@ };

40

dist/MinFormsProps.d.ts

@@ -5,14 +5,24 @@ /// <reference types="react" />

};
export declare type SetValue<V extends object> = (value: keyof V, newValue: V[keyof V]) => void;
export declare type SetValue<V extends object> = (
/**
* Name of value property
*/
value: keyof V,
/**
* It's value
*/
newValue: V[keyof V]) => void;
export declare type RenderProps<V extends object> = {
/**
* Minforms computed values
* Those are obtained from `initialValues` and `values` props
*/
values: V;
/**
* Change event binding for input `onChange`
* Automatically update `value` based on input's name
* To make this work, please put `handleChange` inside your input's `onChange` event
*/
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
/**
* Possible errors returned `validation`
* Possible errors returned from `validation` prop
*/

@@ -25,12 +35,20 @@ errors: ErrorsFromValues<V>;

/**
* OnSubmit event
* submit event, pass your custom submit function
*/
onSubmit: (callback: (values: V) => void) => void;
submit: (callback: (values: V) => void) => void;
};
export declare type MinFormsProps<V extends object> = {
/**
* Initial values passed to QuickForm components
* Initial values passed to QuickForm components.
* This is required property, once you describe your initialValues
* you'll be no longer able to change the Shape of values.
*/
initialValues: V;
/**
* Values passed to MinForms. If your component has controlled state
* and you want to pass changed values to MinForms, use this
* props to update values.
*/
values?: Partial<V>;
/**
* Render function that renders form based on initial values

@@ -47,9 +65,15 @@ * @param props - given props

/**
* Should validate only on submit ?
* Should validate on submit ?
* @default {false}
*/
validateOnSubmit?: boolean;
/**
* Should immediately after creating a component ?
* Should validate immediately after creating a component ?
* @default {true}
*/
validateOnInit?: boolean;
/**
* What to do, when a new values are passed to `values` props
*/
onValuesChange?: (values: V, nextValues: Partial<V>) => Partial<V>;
};

2

lib/index.ts

@@ -1,1 +0,1 @@

export { MinForm } from './MinFormsWrapper';
export { MinForm } from "./MinFormsWrapper";

43

lib/MinFormsProps.ts
export type ErrorsFromValues<V extends object> = { [ErrorValue in keyof V]?: string };
export type SetValue<V extends object> = (value: keyof V, newValue: V[keyof V]) => void;
export type SetValue<V extends object> = (
/**
* Name of value property
*/
value: keyof V,
/**
* It's value
*/
newValue: V[keyof V]
) => void;

@@ -8,2 +17,3 @@ export type RenderProps<V extends object> = {

* Minforms computed values
* Those are obtained from `initialValues` and `values` props
*/

@@ -13,3 +23,4 @@ values: V;

/**
* Change event binding for input `onChange`
* Automatically update `value` based on input's name
* To make this work, please put `handleChange` inside your input's `onChange` event
*/

@@ -19,3 +30,3 @@ handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

/**
* Possible errors returned `validation`
* Possible errors returned from `validation` prop
*/

@@ -30,5 +41,5 @@ errors: ErrorsFromValues<V>;

/**
* OnSubmit event
* submit event, pass your custom submit function
*/
onSubmit: (callback: (values: V) => void) => void;
submit: (callback: (values: V) => void) => void;
};

@@ -38,3 +49,5 @@

/**
* Initial values passed to QuickForm components
* Initial values passed to QuickForm components.
* This is required property, once you describe your initialValues
* you'll be no longer able to change the Shape of values.
*/

@@ -44,2 +57,9 @@ initialValues: V;

/**
* Values passed to MinForms. If your component has controlled state
* and you want to pass changed values to MinForms, use this
* props to update values.
*/
values?: Partial<V>;
/**
* Render function that renders form based on initial values

@@ -58,3 +78,4 @@ * @param props - given props

/**
* Should validate only on submit ?
* Should validate on submit ?
* @default {false}
*/

@@ -64,5 +85,11 @@ validateOnSubmit?: boolean;

/**
* Should immediately after creating a component ?
* Should validate immediately after creating a component ?
* @default {true}
*/
validateOnInit?: boolean;
/**
* What to do, when a new values are passed to `values` props
*/
onValuesChange?: (values: V, nextValues: Partial<V>) => Partial<V>;
};

4

package.json
{
"name": "minforms",
"version": "0.0.3",
"version": "0.0.5",
"description": "Small and quick alternative to formik",

@@ -10,3 +10,3 @@ "main": "dist/index.js",

"build": "tsc",
"lint": "prettier --write ./lib/**/*.(ts|tsx)",
"lint": "prettier --write ./lib/**/*.{tsx,ts}",
"test": "echo \"Error: no test specified\" && exit 1"

@@ -13,0 +13,0 @@ },

21

README.md
# MinForms
_- Too small to not use_
[![Build Status](https://travis-ci.org/dderevjanik/minforms.svg?branch=master)](https://travis-ci.org/dderevjanik/minforms)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
Small and quick alternative to [formik](https://github.com/jaredpalmer/formik)
🔥 Small and quick alternative to [formik](https://github.com/jaredpalmer/formik)
## Why ?
## Why
Formik is a really great library for building forms in typescript. Has great API
Formik is a really great library for building forms in Typescript React. Has great API
and it's easy to use. **MinForms** library is not trying to replace Formik in any
way, it's just small lib which helps you to build basic forms. For complicate
forms, I suggest to use [formik](https://github.com/jaredpalmer/formik) instead.
way, it's just a small lib which helps you to build basic forms. For complex
forms, I suggest you to use [formik](https://github.com/jaredpalmer/formik) instead.
Main features:
* small in size
* easy to use
* easy to use (_only one component_)
* has full `typescript` support
* no external dependencies
! `minforms` library is designed to provides no Fields or Custom Inputs. It only cares
about values you provided, so you can build best suited Fields/Inputs for you.
## Installation

@@ -97,2 +100,4 @@

RenderProps are passed to minform's render function (check example above)
```typescript

@@ -99,0 +104,0 @@ values: V;

lib/MinForms.tsx

Sorry, the diff of this file is not supported yet