feat(formiks): add FormikTextarea (#31)

src/formiks/FormikTextarea.tsx

@@ -0,0 +1,25 @@
+import { useField } from 'formik'
+import { useCallback, useEffect } from 'react'
+
+import { Textarea } from '../fields/Textarea'
+
+import type { TextareaProps } from '../fields/Textarea'
+
+export type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>
+export function FormikTextarea({ name, ...originalProps }: FormikTextareaProps) {
+  const [, , helpers] = useField(name)
+  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+  // both because it is useless and it will trigger infinite hook calls
+  const { setValue } = helpers
+
+  const handleChange = useCallback((nextValue: string | undefined) => {
+    setValue(nextValue)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => setValue(undefined), [])
+
+  return <Textarea name={name} onChange={handleChange} {...originalProps} />
+}

src/index.ts

@@ -15,6 +15,7 @@ export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
 export { FormikEffect } from './formiks/FormikEffect'
 export { FormikMultiSelect } from './formiks/FormikMultiSelect'
 export { FormikSelect } from './formiks/FormikSelect'
+export { FormikTextarea } from './formiks/FormikTextarea'
 export { FormikTextInput } from './formiks/FormikTextInput'
 
 export { ThemeProvider } from './ThemeProvider'
@@ -35,4 +36,5 @@ export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker
 export type { FormikEffectProps } from './formiks/FormikEffect'
 export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect'
 export type { FormikSelectProps } from './formiks/FormikSelect'
+export type { FormikTextareaProps } from './formiks/FormikTextarea'
 export type { FormikTextInputProps } from './formiks/FormikTextInput'

stories/formiks/FormikCheckbox.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikCheckbox } from '../../src'
 import { Output } from '../_components/Output'
@@ -29,9 +29,11 @@ export const _FormikCheckbox = (props: FormikCheckboxProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikDatePicker.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikDatePicker } from '../../src'
 import { Output } from '../_components/Output'
@@ -32,9 +32,11 @@ export const _FormikDatePicker = (props: FormikDatePickerProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikDateRangePicker.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikDateRangePicker } from '../../src'
 import { Output } from '../_components/Output'
@@ -33,9 +33,11 @@ export const _FormikDateRangePicker = (props: FormikDateRangePickerProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikMultiSelect.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikMultiSelect } from '../../src'
 import { Output } from '../_components/Output'
@@ -35,9 +35,11 @@ export const _FormikMultiSelect = (props: FormikMultiSelectProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikSelect.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikSelect } from '../../src'
 import { Output } from '../_components/Output'
@@ -35,9 +35,11 @@ export const _FormikSelect = (props: FormikSelectProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikTextInput.stories.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { FormikEffect, FormikTextInput } from '../../src'
 import { Output } from '../_components/Output'
@@ -28,9 +28,11 @@ export const _FormikTextInput = (props: FormikTextInputProps) => {
     | '∅'
   >('∅')
 
+  const key = useMemo(() => props.name, [props.name])
+
   return (
     <>
-      <Formik initialValues={{}} onSubmit={noop}>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
         <>
           <FormikEffect onChange={setOutputValue} />
 

stories/formiks/FormikTextarea.stories.tsx

@@ -0,0 +1,46 @@
+import { Formik } from 'formik'
+import { useMemo, useState } from 'react'
+
+import { FormikEffect, FormikTextarea } from '../../src'
+import { Output } from '../_components/Output'
+import { noop } from '../_utils/noop'
+
+import type { FormikTextareaProps } from '../../src'
+
+const args: FormikTextareaProps = {
+  name: 'myTextarea'
+}
+
+export default {
+  title: 'Formiks/FormikTextarea',
+  component: FormikTextarea,
+
+  argTypes: {},
+
+  args
+}
+
+export const _FormikTextarea = (props: FormikTextareaProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        myTextarea?: string
+      }
+    | '∅'
+  >('∅')
+
+  const key = useMemo(() => props.name, [props.name])
+
+  return (
+    <>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikTextarea {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}