@agile-ts/multieditor

[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: "[e-mail]"
// }

⛳️ Sandbox

Test the Multieditor yourself in a codesandbox. It's only one click away. Just select your preferred Framework below.

• React

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. 😀 To find out more about contributing, check out the CONTRIBUTING.md.

♥️ Contributors

Become a contributor