@witivio_teamspro/northstar-form v6.1.5

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

Hook returned properties

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.