Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

formik

Package Overview
Dependencies
Maintainers
1
Versions
212
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

formik - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

8

es6/index.d.ts

@@ -30,6 +30,6 @@ /// <reference types="react" />

isSubmitting: boolean;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
onChange: (e: React.ChangeEvent<any>) => void;
onBlur: (e: any) => void;
onChangeValue: (name: string, value: any) => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
handleChange: (e: React.ChangeEvent<any>) => void;
handleBlur: (e: any) => void;
handleChangeValue: (name: string, value: any) => void;
setError: (e: any) => void;

@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

@@ -53,3 +53,3 @@ import * as tslib_1 from "tslib";

var values = _a.values, error = _a.error, errors = _a.errors, touched = _a.touched, isSubmitting = _a.isSubmitting, setError = _a.setError, setErrors = _a.setErrors, setValues = _a.setValues, setTouched = _a.setTouched, setSubmitting = _a.setSubmitting, rest = tslib_1.__rest(_a, ["values", "error", "errors", "touched", "isSubmitting", "setError", "setErrors", "setValues", "setTouched", "setSubmitting"]);
return (tslib_1.__assign({ onChange: function (e) {
return (tslib_1.__assign({ handleChange: function (e) {
e.persist();

@@ -69,7 +69,7 @@ var _a = e.target, type = _a.type, name = _a.name, value = _a.value, checked = _a.checked;

var _b, _c;
}, onBlur: function (e) {
}, handleBlur: function (e) {
e.persist();
setTouched(tslib_1.__assign({}, values, (_a = {}, _a[e.target.name] = true, _a)));
var _a;
}, onChangeValue: function (name, value) {
}, handleChangeValue: function (name, value) {
// Set changed fields as touched

@@ -82,3 +82,3 @@ setTouched(tslib_1.__assign({}, touched, (_a = {}, _a[name] = true, _a)));

var _a, _b, _c;
}, onSubmit: function (e) {
}, handleSubmit: function (e) {
e.preventDefault();

@@ -113,3 +113,3 @@ setTouched(touchAllFields(values));

}
}, onReset: function () {
}, handleReset: function () {
setSubmitting(false);

@@ -116,0 +116,0 @@ setErrors({});

@@ -30,6 +30,6 @@ /// <reference types="react" />

isSubmitting: boolean;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
onChange: (e: React.ChangeEvent<any>) => void;
onBlur: (e: any) => void;
onChangeValue: (name: string, value: any) => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
handleChange: (e: React.ChangeEvent<any>) => void;
handleBlur: (e: any) => void;
handleChangeValue: (name: string, value: any) => void;
setError: (e: any) => void;

@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

{
"name": "formik",
"description": "An elegant way to handle forms in React",
"version": "0.3.1",
"version": "0.4.0",
"license": "MIT",

@@ -6,0 +6,0 @@ "author": "Jared Palmer <jared@palmer.net>",

@@ -29,7 +29,7 @@ # Formik

- `error: any` - A top-level error object, can be whatever you need.
- `onSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>`
- `onReset: () => void` - Reset handler. This should be passed to `<button onClick={onReset}>...</button>`
- `handleSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>`
- `handleReset: () => void` - Reset handler. This should be passed to `<button onClick={handleReset}>...</button>`
- `isSubmitting: boolean` - Submitting state. Either true or false.
- `onChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute.
- `onChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update.
- `handleChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute.
- `handleChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update.

@@ -77,7 +77,7 @@

// are injected into a prop called `values`. Additionally, Formik injects
// a single onChange handler that you can use on every input. You also get
// onSubmit, errors, and isSubmitting for free. This makes building custom
// an onChange handler that you can use on every input. You also get
// handleSubmit, errors, and isSubmitting for free. This makes building custom
// inputs easy.
const SimpleForm = ({ values, onChange, onSubmit, onReset, errors, error isSubmitting, }) =>
<form onSubmit={onSubmit}>
const SimpleForm = ({ values, handleChange, handleSubmit, handleReset, errors, error, isSubmitting, }) =>
<form onSubmit={handleSubmit}>
<input

@@ -87,3 +87,3 @@ type="text"

value={values.email}
onChange={onChange}
onChange={handleChange}
placeholder="john@apple.com"

@@ -96,3 +96,3 @@ />

value={values.facebook}
onChange={onChange}
onChange={handleChange}
placeholder="facebook username"

@@ -105,3 +105,3 @@ />

value={values.twitter}
onChange={onChange}
onChange={handleChange}
placeholder="twitter username"

@@ -111,3 +111,3 @@ />

{error && error.message && <div style={{color: 'red'}}>Top Level Error: {error.message}</div>}
<button onClick={onReset}>Reset</button>
<button onClick={handleReset}>Reset</button>
<button type="submit" disabled={isSubmitting}>Submit</button>

@@ -114,0 +114,0 @@ </form>;

@@ -30,6 +30,6 @@ /// <reference types="react" />

isSubmitting: boolean;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
onChange: (e: React.ChangeEvent<any>) => void;
onBlur: (e: any) => void;
onChangeValue: (name: string, value: any) => void;
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
handleChange: (e: React.ChangeEvent<any>) => void;
handleBlur: (e: any) => void;
handleChangeValue: (name: string, value: any) => void;
setError: (e: any) => void;

@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc