Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,94 @@

> Write forms in React that feel like ✨ magic ✨

Magical Forms is a framework that allows you to create flexible, composable forms.

It's expected that you'll use this library to create your own form framework in your component library.

## Getting Started

```bash
yarn add @magical-forms/react
```

## Basic example

Here is a minimum implementation...
```jsx
import { field, useForm } from '@magical-forms/react'


const App = () => {
const form = useForm(field.text());

return (
<InputComponent
label="Email"
{
...form.fields.props,
// These props are spread
// onto the component
// onChange: event => void;
// onFocus: () => void;
// onBlur: () => void;
// value: string;
// meta: { }
}
/>
);
}
```


...but it's likely you will have more than one field in your form...

```jsx
// this is your form schema - you will generally define this outside of your component
const loginForm = field.object({
email: field.text(),
password: field.text(),
});

const App = () => {
const form = useForm(loginForm);

return (
<div>
<InputComponent
label="Email"
{...form.fields.email.props}
/>
<InputComponent
label="Password"
{...form.fields.password.props}
/>
</div>
);
}
```

## Available scalas
Magical Forms comes with these fields out of the box.
- text
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text doesn't exist - there is only scalar and object

- object

## Validation

```jsx
const questionForm = field.object({
capitalOfNewSouthWales: field.text({
validate: validate((value) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't the validation API in magical forms

validate.required(value);
if (value !== 'Sydney') {
return validate.error("The answer is 'Sydney'");
}
return value;
}),
}),
});
```


## Thanks/Inspiration

- [`react-use-form-state`](https://github.com/wsmd/react-use-form-state) for the concept of having functions that return props for a certain kind of input
Expand Down