FluentUI React Northstar Form

How to use it?

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

const signUpForm = useForm({
    items: {
        email: Input({
            inputMode: "email",
            required: true,
            label: "Email",
            placeholder: "Enter your email",
            inverted: props.invertColors,
        }),
        pseudo: Input({
            inputMode: "text",
            required: true,
            label: "Pseudo",
            placeholder: "Enter your pseudo",
            inverted: props.invertColors,
        }),
        gender: RadioGroup({
            required: true,
            label: "Gender",
            items: [{label: "Male", value: 0}, {label: "Female", value: 1}, {label: "Other", value: 3}]
        }),
        avatar: ImagePicker({
            label: "Avatar",
        }),
        agreeConditions: Checkbox({
            label: "I agree conditions",
            toggle: true,
            required: true,
            initialValue: false,
        })
    },
});

useForm hook

Hook parameters

| Property | Description | |-----------|:-------------------------------------:| | items* | List of fields of the form | | locale | Locale for translations | | fluid | Take the full width of form container | | styles | Custom styles for the form | | className | Class name of the form | | readOnly | Fields can only be read | | inverted | Invert background color of fields | | disabled | Fields are disabled |

Hook returned properties

| Property | Description | |------------------------|:----------------------------------------------------:| | formItems | An object containing all fields elements of the form | | state | State properties of the form | | isValid | Form validity | | renderForm | Function to render form | | reset | Function to reset form | | clear | Function to clear form | | setFieldsInitialValues | Function to set form initial values | | setFieldsValues | Function to set form values | | hasChanged | Has form changed ? |

Update global form settings

1. Use UseFormSettingsProvider in index.tsx file.

const root = ReactDOM.createRoot(
    window.document.getElementById('root') as HTMLElement
);

root.render(
    <UseFormSettingsProvider>
        <App/>
    </UseFormSettingsProvider>
);

2. Use useFormSettings hook to get and set global form settings.

const MyComponent = () => {
    const updateFormSettings = useFormSettingsUpdater();

    useEffect(() => {
        updateFormSettings({
            locale: "fr",
            inverted: true,
            readOnly: true,
            onLoadRichTextImage: async (src, setSource) => {
                setSource("https://static.wikia.nocookie.net/official-furby/images/e/ed/80FAD579-69DB-4057-AC22-AED3AB66BDDD.gif");
                await new Promise(resolve => setTimeout(resolve, 1000));
                setSource(src);
            }
        });
    }, [inverted, readOnly, disabled]);

    return (
        <div>Hello World</div>
    )
}

All forms will use these settings by default.

Check source code of examples for more information.