https://github.com/keajs/kea-forms
https://github.com/keajs/kea-forms
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/keajs/kea-forms
- Owner: keajs
- License: mit
- Created: 2021-07-05T19:02:06.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-06T00:17:16.000Z (11 months ago)
- Last Synced: 2025-03-17T16:53:33.608Z (2 months ago)
- Language: TypeScript
- Size: 479 KB
- Stars: 3
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/kea-forms)
[](https://bundlephobia.com/result?p=kea-forms)
[](https://bundlephobia.com/result?p=kea-forms)
[](#backers)
[](#sponsors)
# kea-forms
This is an **experimental** plugin adding support for `forms` inside kea logic, with full TypeScript/TypeGen support.
## Installation
`kea-forms` requires kea-typegen `1.1.5+` and kea `2.4.5+`.
```bash
yarn add kea-forms
```
Set it up like all other kea plugins:
```ts
import { Provider, resetContext } from 'kea'
import { formsPlugin } from 'kea-forms'
resetContext({
plugins: [formsPlugin],
})
```
## Usage
Code like this:
```ts
import { kea } from 'kea-forms'
import { forms } from 'kea-forms'
export interface UserFormType {
name: string
email: string
}
export const formsLogic = kea>([
// ... actions, reducers, ...
forms({
userForm: {
defaults: {
name: '',
email: '',
} as UserFormType,
errors: (values) => ({
name: !values.name && 'Please enter a name',
email: !values.email
? 'Please enter an email'
: !validateEmail(values.email)
? 'Please enter a valid email'
: null,
}),
submit: (formValues) => {
console.log('submitting!', formValues)
},
showErrorsOnTouch: true,
alwaysShowErrors: false,
},
}),
// ... other listeners, etc
])
```
Produces the following actions and values:
```ts
interface formsLogicType {
actions: {
setUserFormValue: (key: string, value: any) => void
setUserFormValues: (values: Partial) => void
touchUserFormField: (key: string) => void
resetUserForm: (values?: UserFormType) => void
submitUserForm: () => void
submitUserFormRequest: (userForm: UserFormType) => void
submitUserFormSuccess: (userForm: UserFormType) => void
submitUserFormFailure: (error: Error) => void
}
values: {
userForm: UserFormType
userFormChanges: DeepPartial
userFormTouches: DeepPartialMap
isUserFormSubmitting: boolean
showUserFormErrors: boolean
userFormChanged: boolean
userFormTouched: boolean
userFormValidationErrors: DeepPartialMap
userFormHasErrors: boolean
userFormErrors: DeepPartialMap
isUserFormValid: boolean
}
}
```
Then use the provided `Form` and `Field` helpers inside your component:
```tsx
import { formsLogic } from './formsLogic'
import { useActions, useValues } from 'kea'
import { Form, Field } from 'kea-forms'
function MyForm() {
const { isUserFormSubmitting } = useValues(formsLogic)
const { setUserFormValue } = useActions(formsLogic)
return (
Demonstrating a simple form below
{/* "value" and "onChange" added automatically */}
setUserFormValue('guest', '')}>
No Guest
setUserFormValue('guest', 'Other Name')}>
Other Guest
{({ onChange, value }) => (
onChange(e.target.checked)} value={value} /> Subscribe to our
newsletter!!
)}
)
}
```
See the code in the `demo` folder for more.
## Coming next on the roadmap
- Async validation of fields
- Nested fields (e.g. arrays of objects in the form)