Simple Form Manager for UI-Frameworks
// 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
// ..
<label>First Name:</label>
<input
onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
defaultValue={signUpEditor.getItemInitialValue("firstName")}
/>
<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
// ..
// Submit Multieditor and see what the 'onSubmit()' method will log
multiEditor.submit();
// Submited {
// id: "myId",
// name: "Jeff",
// email: "test@test.com"
// }Test the Multieditor yourself in a codesandbox. It's only one click away. Just select your preferred Framework below.
More examples can be found in the Example section.
Write minimalistic, boilerplate-free code that captures your intent.
// 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();
}
}- Works in nearly any UI-Framework (currently supported are React, React-Native and Vue).
- Surly behaves with the workflow that suits you best.
- Has 0 external dependencies.
Minimizes the number of re-renders and validate computation.
npm install @agile-ts/multieditor
The multieditor package is an extension of AgileTs and doesn't work without the 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
Does the Multieditor sound interesting to you? Take a look at our documentation, to learn more about its functionalities and capabilities. If you have any further questions, feel free to join our Community Discord. We will be happy to help you.
Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀 To find out more about contributing, check out the CONTRIBUTING.md.
