# [WIP] Multi Editor
> Simple Form Manager for UI-Frameworks
## π Example
```ts
// Create Multieditior
const multiEditor = createMultieditor(editor => ({
initialData: {
id: "myId", // Initial Id
email: undefined, // Inital Email
name: undefined, // Inital Name
},
onSubmit: async (data) => {
console.log("Submitted ", data); // <---------
}, // |
// Properties that are always passed to the 'onSubmit()' method
fixedProperties: ["id"],
validationSchema: {
// Validation with inbuilt tree shakable validation methods
email: agileResolver(isString, isEmail, isRequired),
// Validation with external validatiors like Yup
name: yupResolver(Yup.string().required().max(10).min(2)),
}
}));
// Use the Multieditor in any UI-Form
// ..
signUpEditor.setValue("firstName", e.target.value)}
defaultValue={signUpEditor.getItemInitialValue("firstName")}
/>
// ..
// Submit Multieditor and see what the 'onSubmit()' method will log
multiEditor.submit();
// Submited {
// id: "myId",
// name: "Jeff",
// email: "test@test.com"
// }
```
### β³οΈ Sandbox
Test the Multieditor yourself in a [codesandbox](https://codesandbox.io/s/multieditor-yxt4x).
It's only one click away. Just select your preferred Framework below.
- [React](https://codesandbox.io/s/multieditor-yxt4x)
More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
## β Why Multieditor
#### π Straightforward
Write minimalistic, boilerplate-free code that captures your intent.
```ts
// Simple and tree shakable inbuilt validation
agileResolver(isRequired, isString('custom error message'), isEmail);
// Easy integration with external validation libraries like Yup
yupResolver(Yup.string().email());
// Easy value compution
computeMethods: {
name: (value) => {
return value.toLowerCase();
}
}
```
### π€Έβ Flexible
- Works in nearly any UI-Framework (currently supported are [React](https://reactjs.org/), [React-Native](https://reactnative.dev/) and [Vue](https://vuejs.org/)).
- Surly behaves with the workflow that suits you best.
- Has **0** external dependencies.
### β‘οΈ Fast
Minimizes the number of re-renders
and validate computation.
## β¬οΈ Installation
```
npm install @agile-ts/multieditor
```
The `multieditor` package is an extension of AgileTs and doesn't work without the [`core`](https://agile-ts.org/docs/core) package,
which functions as the brain of AgileTs and is indispensable.
Unfortunately, we can't combine each `core` with `multieditor` version.
Therefore, we have created a table which shows which versions fit together without restrictions.
| @agile-ts/multieditor | @agile-ts/core | NPM Version |
| ----------------------| ----------------------- | ------------------------ |
| v0.0.22+ | v0.2.5+ | v6+ |
_Other Versions aren't supported anymore_
## π Documentation
Does the Multieditor sound interesting to you?
Take a look at our **[documentation](https://agile-ts.org/docs/introduction)**,
to learn more about its functionalities and capabilities.
If you have any further questions,
feel free to join our [Community Discord](https://discord.gg/T9GzreAwPH).
We will be happy to help you.
## π¨βπ» Contribute
Get a part of AgileTs and start contributing. We welcome any meaningful contribution. π
To find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
### β₯οΈ Contributors
[Become a contributor](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md)
## π Example
```ts
// Create Multieditior
const multiEditor = createMultieditor(editor => ({
initialData: {
id: "myId", // Initial Id
email: undefined, // Inital Email
name: undefined, // Inital Name
},
onSubmit: async (data) => {
console.log("Submitted ", data); // <---------
}, // |
// Properties that are always passed to the 'onSubmit()' method
fixedProperties: ["id"],
validationSchema: {
// Validation with inbuilt tree shakable validation methods
email: agileResolver(isString, isEmail, isRequired),
// Validation with external validatiors like Yup
name: yupResolver(Yup.string().required().max(10).min(2)),
}
}));
// Use the Multieditor in any UI-Form
// ..
signUpEditor.setValue("firstName", e.target.value)}
defaultValue={signUpEditor.getItemInitialValue("firstName")}
/>
### β₯οΈ Contributors