@witivio_teamspro/northstar-form NPM

FluentUI React Northstar Form

How to use it?

Create a functional React component
Import this piece of code into your React component:

const {formItems, dataRef, hasChanged, form, isValid, reset} = useForm({
    fluid: true,
    items: [
        {
            type: "input",
            id: "email",
            inputMode: "email",
            required: true,
            label: "Email",
            placeholder: "Enter your email"
        },
        {
            type: "input",
            id: "pseudo",
            required: true,
            label: "Pseudo",
            placeholder: "Enter your pseudo"
        },
        {
            type: "radioGroup",
            id: "gender",
            required: true,
            label: "Gender",
            items: [{label: "Male", value: 0}, {label: "Female", value: 1}, {label: "Other", value: 3}]
        },
        {
            type: "imagePicker",
            id: "avatar",
            label: "Avatar",
        },
        {
            type: "checkbox",
            id: "agreeConditions",
            label: "I agree conditions",
            toggle: true,
            required: true,
            initialValue: false,
        }
    ],
}, []);

useForm hook

Hook parameters

Property	Description
items*	List of fields of the form
fluid	Take the full width of form container
styles	Custom styles for the form
className	Class name of the form
readOnly	Values can only be read
onDataChange	Handler when data has changed

Hook returned properties

Property	Description
formItems	A map containing all fields of the form, you can get a specific element by its id.Useful if you want a custom disposition for your form.
dataRef	Reference to the form data, you can access a specific field value with its id
hasChanged	Are form values different from initial values?
form	The form with all fields to put in render
isValid	Are form values valid?
reset	Reset form to its initial state