Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@croz/nrich-form-configuration-core
Advanced tools
Readme
@croz/nrich-form-configuration-core
is a module for generating automatic validations for forms in the application.
It's a frontend part of nrich-form-configuration backend module.
Together, they allow the user to define validations in a single place (backend).
For validation schemas this lib uses yup.
To use this module in your project run npm install @croz/nrich-form-configuration-core
or yarn add @croz/nrich-form-configuration-core
On some upper level of your app, wrap your components in FormConfigurationProvider
.
import { FormConfigurationProvider } from "@croz/nrich-form-configuration-core";
const App = () => (
<FormConfigurationProvider loader="Loading...">
{/* rest of the app... */}
</FormConfigurationProvider>
);
In your form component, use useYupFormConfiguration
with your form id defined on backend.
import React, { useState } from "react";
import { useYupFormConfiguration } from "@croz/nrich-form-configuration-core";
import { Form, Formik } from "formik";
type CreateForm = {
/* fields of the form */
}
export const SomeFormComponent = () => {
const [formValues, setFormValues] = useState({});
const validationSchema = useYupFormConfiguration<CreateForm>('user.create-form');
return (
<Formik
validationSchema={validationSchema}
onSubmit={(values) => setFormValues(values)}
>
<Form>
{ /* Rest of the form */}
</Form>
</Formik>
);
};
NOTE: Formik is used just as an example, you can use any form lib compatible with yup
.
FormConfigurationProvider
component has the following props:
Prop name | Description | Required | Default value |
---|---|---|---|
children | Component tree that will be using nrich form configuration | yes | none |
loader | Custom component used while waiting for configuration fetch to finish | no | none |
url | Backend form configuration path | no | /nrich/form/configuration |
requestOptionsResolver | Function that creates options for the initial fetch call to backend | no | none |
additionalValidatorConverters | List of ValidatorConverter s used to allow custom validations | no | none |
For custom validations to work, you need to provide a ValidatorConverter
for it. ValidatorConverter
contains two fields supports
and convert
.
supports
is used to check if this is the correct validation for a given form validation configuration, while convert
serves as an implementation of the
validation. convert
will usually use the yup's Schema.test method.
import oib from "oib.js";
import { FormConfigurationProvider } from "@croz/nrich-form-configuration-core";
const additionalValidatorConverters = [
{
supports: (configuration) => configuration.name === "ValidOib",
convert: (configuration, validator) => validator.test("validOib", configuration.errorMessage, value => oib.validate(value))
}
];
const getRequestParams = (): RequestInit => ({
headers: {
Authorization: "Bearer token",
},
});
const App = () => (
<FormConfigurationProvider loader="Loading..."
additionalValidatorConverters={additionalValidatorConverters}
requestOptionsResolver={getRequestParams}>
{/* rest of the app... */}
</FormConfigurationProvider>
);
FAQs
Contains core utilities related to the nrich-form-configuration module
The npm package @croz/nrich-form-configuration-core receives a total of 163 weekly downloads. As such, @croz/nrich-form-configuration-core popularity was classified as not popular.
We found that @croz/nrich-form-configuration-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.