![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@altiore/form
Advanced tools
Readme
@altiore/form
Productive, flexible and extensible forms with easy-to-use validation and the most user-friendly API @altiore/form
русская версия README.RU.md
Let's face it, forms in React are verbose and awkward. This library will help facilitate and speed up the work with forms. It solves the following main problems:
This library, unlike most others, does not store the state of input fields. Within the @altiore/form library, we consider that the data entered into the form is stored on the page. If you need to provide data storage from inputs - you have complete freedom to implement this using your favorite state manager.
This feature means that if you hide the input fields, the data will not be stored.
In other words: hiding data should be equivalent to sending, and at the time of hiding data, you need to save them using your favorite state manager
npm i @altiore/form -S
yarn add @altiore/form
import React, {useCallback} from 'react';
import {Form} from '@altiore/form';
const MyForm = () => {
const handleSubmit = useCallback((values) => {
console.log('form.values is', values);
}, []);
return (
<Form onSubmit={handleSubmit}>
<input name="name" />
<button type="submit">Submit</button>
</Form>
);
};
Allows you to customize the appearance of the input adds validation functionality and several other useful features. Custom Field in details You could use FieldArray for arrays
import React, {useCallback} from 'react';
import {createField, Form} from '@altiore/form';
/**
* "error" here is added by createField
* "name" and "label" comes from usage area
*/
const FieldView = ({error, name, label}) => {
return (
<div>
<label>{label}</label>
<input name={name} />
<span>{error}</span>
</div>
);
};
export const Field = createField(FieldView);
const MyForm = () => {
const handleSubmit = useCallback((values) => {
console.log('form.values is', values);
}, []);
return (
<Form onSubmit={handleSubmit}>
<Field
label="Label"
name="name"
validate={/* you can add validators here */}
/>
<button type="submit">Submit</button>
</Form>
);
};
We prefer field-level validation. By analogy with as it is implemented in the browser. But you can also validate all data at the time of sending
import React, {useCallback} from 'react';
import {Form, isEmail, isRequired} from '@altiore/form';
const tooShort = (value) => {
if (value.length < 5) {
return 'Too short';
}
};
const MyForm = () => {
const handleSubmit = useCallback((values) => {
console.log('form.values is', values);
}, []);
return (
<Form onSubmit={handleSubmit}>
<Field label="Email" name="email" validate={[isRequired(), isEmail()]} />
<Field label="Long" name="long" validate={tooShort} />
<button type="submit">Submit</button>
</Form>
);
};
import React, {useCallback} from 'react';
import {Form, isEmail, isRequired} from '@altiore/form';
const validate = (values) => {
const errors = {};
if (values.long?.length < 5) {
errors.long = 'Too short';
}
return errors;
};
const MyForm = () => {
const handleSubmit = useCallback((values, setErrors) => {
const errors = validate(values);
if (Object.keys(errors)?.length) {
setErrors(errors);
return;
}
console.log('Correct data for sending', values);
}, []);
return (
<Form onSubmit={handleSubmit}>
<Field label="Long" name="long" />
<button type="submit">Submit</button>
</Form>
);
};
import React, {useCallback} from 'react';
import {FieldProps, createField, Form} from '@altiore/form';
interface IField {
label: string;
}
/**
* "error" here is added by createField
* "name" and "label" comes from usage area
*/
const FieldView = ({error, name, label}: FieldProps<IField>) => {
return (
<div>
<label>{label}</label>
<input name={name} />
<span>{error}</span>
</div>
);
};
export const Field = createField<IField>(FieldView);
interface FormState {
name: string;
}
const MyForm = () => {
const handleSubmit = useCallback((values: FormState) => {
console.log('form.values is', values);
}, []);
return (
<Form<FormState> onSubmit={handleSubmit}>
<Field<FormState>
label="Label"
name="name"
validate={/* you can add validators here */}
/>
<button type="submit">Submit</button>
</Form>
);
};
import React, {useCallback} from 'react';
import {
FieldProps,
createField,
createFieldArray,
createSubmit,
Form,
isRequired,
} from '@altiore/form';
interface IField {
label: string;
}
const FieldView = createField<IField>(
({error, name, label}: FieldProps<IField>) => {
return (
<div>
<label>{label}</label>
<input name={name} />
<span>{error}</span>
</div>
);
},
);
export interface IFieldArray {
label?: string;
}
export const FieldIngredients = createFieldArray<IFieldArray>(({list}) => {
const renderIng = useCallback(({key, remove}) => {
return (
<div key={key}>
<div>
<div>
<button onClick={remove} type="button">
-
</button>
</div>
<div>
<Field label="Title" name="title" validate={[isRequired(null)]} />
<Field label="Desc" name="desc" />
</div>
</div>
</div>
);
}, []);
return (
<>
{list.map(renderIng)}
<button onClick={list.add} type="button">
Add Ingredient
</button>
</>
);
});
export interface ISubmit {
children: string;
className?: string;
skipUntouched?: boolean;
}
export const Submit = createSubmit<ISubmit>(
({isInvalid, isSubmitting, isUntouched, ...props}: SubmitProps<ISubmit>) => {
return (
<button {...props} disabled={isInvalid || isSubmitting || isUntouched} />
);
},
);
interface FormState {
name: string;
}
const MyForm = () => {
const handleSubmit = useCallback((values: FormState) => {
console.log('form.values is', values);
}, []);
return (
<Form<FormState> onSubmit={handleSubmit}>
<Field<FormState> label="Label" name="name" validate={isRequired(null)} />
<FieldIngredients label="Ingredients" name="ingredients" />
<Submit>Submit</Submit>
</Form>
);
};
FAQs
Form helper for building powerful forms
The npm package @altiore/form receives a total of 3 weekly downloads. As such, @altiore/form popularity was classified as not popular.
We found that @altiore/form demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.