[WIP] Multi Editor
Simple Form Manager for UI-Frameworks
👀 Example
// 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"
// }
⛳️ Sandbox
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.
❓ Why Multieditor
🚅 Straightforward
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();
}
}
🤸 Flexible
- 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.
⚡️ 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
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, 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.
👨💻 Contribute
Get a part of AgileTs and start contributing. We welcome any meaningful contribution.