New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 16.3 #594

Merged
merged 28 commits into from May 11, 2018

Conversation

3 participants
@jaredpalmer
Copy link
Owner

jaredpalmer commented Apr 22, 2018

This adds create-react-context to Formik and upgrades React to 16.3. It also exposes a few new helpers:

  • connect() An HoC wrapper around <FormikConsumer />
  • <FormikConsumer />
  • <FormikProvider />

@jaredpalmer jaredpalmer changed the title Begin move to React 16.3 React 16.3 Apr 22, 2018

FormikHandlers &
FormikComputedProps<Values> & {
validate?: ((
values: Values

This comment has been minimized.

@jaredpalmer

jaredpalmer Apr 22, 2018

Owner

So in the past, we did not pass thru props or expose Formik's guts to general public. Formik props and context had slight differences. I'm not sure this is a good idea.

This comment has been minimized.

@jaredpalmer

jaredpalmer Apr 22, 2018

Owner

I wonder if this should just be:

export type FormikContext<Values> = FormikProps<Values> &
  Pick<FormikConfig<Values>, 'validate' | 'validationSchema'> & {
    registerField(name: string, resetFn: (nextValues?: any) => void): void;
    unregisterField(name: string): void;
  };

This comment has been minimized.

@jaredpalmer

jaredpalmer Apr 22, 2018

Owner

I guess we are using the word FormikContext to be the name of the object returned by create-react-context, so we'll have to name this something else. Technically, we have never given this a name, it's just been typed as any for the most part. The only weird gotcha is that FastField needs to know about <Formik>'s props validate and validationSchema with current implementation.

@TrySound

This comment has been minimized.

Copy link
Collaborator

TrySound commented Apr 22, 2018

I believe formatting package.json is not the best practice, so maybe it would be better to add it to .prettierignore?

import * as React from 'react';
import { FormikProps } from './types';

export const FormikContext = createContext<FormikProps<any>>({} as any);

This comment has been minimized.

@TrySound

TrySound Apr 22, 2018

Collaborator

I would be happier to see more flatten api with FormikProvider and FormikConsumer.

* Connect any component to Formik context, and inject as a prop called `formik`;
* @param Comp React Component
*/
export function connect<Outer, Values = {}>(

This comment has been minimized.

@TrySound

TrySound Apr 22, 2018

Collaborator

Shouldn't it be called connectFormik or withFormik?

This comment has been minimized.

@jaredpalmer

jaredpalmer Apr 22, 2018

Owner

Already expose withFormik. This is more low level

) {
const nextFieldValue = getIn(nextContext.formik.values, nextProps.name);
const nextFieldError = getIn(nextContext.formik.errors, nextProps.name);
componentWillReceiveProps(nextProps: Props & { formik: FormikProps<any> }) {

This comment has been minimized.

@TrySound

TrySound Apr 22, 2018

Collaborator

Migration to getDeriveStateFromProps can be achieved with react-lifecycles-compat

This comment has been minimized.

@jaredpalmer

jaredpalmer Apr 22, 2018

Owner

Good call

@jaredpalmer

This comment has been minimized.

Copy link
Owner

jaredpalmer commented Apr 22, 2018

Can't update the tests yet because enzyme does not work yet with 16.3

See airbnb/enzyme#1598

@slorber

This comment has been minimized.

Copy link
Contributor

slorber commented Apr 27, 2018

great!

@jaredpalmer with FormikContext.Consumer does it mean i'll be able to inject formik context into my component? I want to build my own Inputs for ReactNative without needing to make the props wiring, as far as I understand it's what it enables

@jaredpalmer

This comment has been minimized.

Copy link
Owner

jaredpalmer commented Apr 27, 2018

Correct

@slorber

This comment has been minimized.

Copy link
Contributor

slorber commented Apr 27, 2018

Cool! is there plan to support base RN components in the future in this package or any other addon package? I'll see how it works in my codebase when released and if this works great I can contribute

@jaredpalmer

This comment has been minimized.

Copy link
Owner

jaredpalmer commented Apr 27, 2018

2 things:

  1. With 16.3, I’m exposing <FormikContext.Consumer>
  2. Yes probably as an addon

@jaredpalmer jaredpalmer merged commit 4ac3cd1 into master May 11, 2018

4 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
security/snyk - package.json No new issues
Details
security/snyk - website/package.json No new issues
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment