Formik: Demos in TypeScript

Created on 19 Jan 2018 · 8Comments · Source: formium/formik

Bug, Feature, or Question?

Question

Info

Will the demos (currently in JS) be converted and offered in TypeScript?

I ask because I am trying to figure out how to use a third-party library (react-select) in addition with TypeScript and make an input component.

Formik Version: 0.10.5
OS: macOS 10.12
Node Version: v8.9.3
Package Manager and version: yarn!

Documentation stale

Source

DevanB

Most helpful comment

The React Native example doesn't compile using Typescript because onChangeText and onBlur are incompatible. What's the recommended Typescript way to pass in the input name?

<TextInput
      onChangeText={props.handleChange('email')}
      onBlur={props.handleBlur('email')}
      value={props.values.email}
    />

lukephills on 31 Jul 2018

👍2

All 8 comments

Here's my shot at the react-select example - https://codesandbox.io/s/mzkv3mr7x (may not be 100% typed though). Wonder if I should create a PR to add this example to this repo, @jaredpalmer?

TS error that you see in line 143 should be gone once DefinitelyTyped/DefinitelyTyped#23054

tsriram on 19 Jan 2018

Are we talking about the new docs site? Yes, I have plans to have a toggle between JS and TS in the examples.

jaredpalmer on 19 Jan 2018

👍1

Any and all documentation, meaning the current and the new.

DevanB on 19 Jan 2018

I get following error:

color must be a array type, but the final value was: null (cast from the value "red"). If "null" is intended as an empty value be sure to mark the schema as .nullable()

When I try to do the select without the multiple select. Even with the multi select on the above sample code gives error when you delete the selection.

Any solution for this?

Update: Forgot to mention I have the Searchable option on.

djdu on 2 Feb 2018

The React Native example doesn't compile using Typescript because onChangeText and onBlur are incompatible. What's the recommended Typescript way to pass in the input name?

<TextInput
      onChangeText={props.handleChange('email')}
      onBlur={props.handleBlur('email')}
      value={props.values.email}
    />

lukephills on 31 Jul 2018

👍2

I'm also running into this issue. Any advice here?

bschnelle on 15 Sep 2018

As long as this bug exists, you can hack your way around it by

<TextInput
  onChangeText={props.handleChange('email')}
  onBlur={props.handleBlur('email') as undefined}
  value={props.values.email}
/>

ghost on 26 Sep 2018

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.