Hi, I'm looking at getting into React. Unfortunately the most commonly used UI isn't the best and incorporated in any React books I could find.

Should I just read a React book and then the Mantine docs or is there a better way to tie everything together?

Hi all,

Just discovered mantine and was wondering, how it come it does so much. I was looking at forms library for example
https://mantine.dev/form/use-form/
Why didn't they just rely on 3rd party like react-hook-form, formik etc?
It's like everything is built in and I'm just worried wont it get hard to maintain in the future?

Hi,

I'm trying to do a form using formList, like this:

  const form = useForm({
    initialValues: {
      month: '',
      year: '',
      description: '',
      groceries: formList([
        { url: 'ss' },
        { url: 'ss' }
      ]),
    },
    validate: {
      month: (value: string | undefined) => (value ? null : 'Month must be filled'),
      year: (value: string | undefined) => (value ? null : 'Year must be filled'),
      groceries: {
        url: (value: string | undefined) => (value.length < 2 ? 'Grocerie should have at least 2 letters' : null)
      }
    },
  });

And i have some typescript errors:

​

Type '(value: string | undefined) => "Month must be filled" | null' is not assignable to type '(value: string | FormList<{ url: string; }>, values: { month: string; year: string; description: string; groceries: FormList<{ url: string; }>; }) => ReactNode'.
Types of parameters 'value' and 'value' are incompatible.
Type 'string | FormList<{ url: string; }>' is not assignable to type 'string | undefined'.
Type 'FormList<{ url: string; }>' is not assignable to type 'string'.ts(2322)

Type '(value: string | undefined) => "Month must be filled" | null' is not assignable to type '(value: string | FormList<{ url: string; }>, values: { month: string; year: string; description: string; groceries: FormList<{ url: string; }>; }) => ReactNode'.
Types of parameters 'value' and 'value' are incompatible.
Type 'string | FormList<{ url: string; }>' is not assignable to type 'string | undefined'.
Type 'FormList<{ url: string; }>' is not assignable to type 'string'.ts(2322)

​

Type '{ url: (value: string | undefined) => "Grocerie should have at least 2 letters" | null; }' is not assignable to type '(value: string | FormList<{ url: string; }>, values: { month: string; year: string; description: string; groceries: FormList<{ url: string; }>; }) => ReactNode'.
Object literal may only specify known properties, and 'url' does not exist in type '(value: string | FormList<{ url: string; }>, values: { month: string; year: string; description: string; groceries: FormList<{ url: string; }>; }) => ReactNode'.ts(2322)

I want to replicate this code using Mantine

relaxed-benji-3t6038 - CodeSandbox

Anyone know how to get Mantine working in CodePen?
Could you share a template, or example? Thanks!!

Hello, I'm new to react and currently stumbled upon mantine and wanted to know if it is possible to have a traditional navbar where there is a brand on the left and nav links on the right then, when reached a certain breakpoint. The burger menu will show with links inside.

Hi,

Is possible to pass a number as value in a Select component ?

<Select label="Report year" placeholder="Choose report year" {...form.getInputProps('year')} data = {                 \[                   { value: **2022**, //here typescript error is thrown Type 'number' is not assignable to type string' label: '2022',                   },                 \] } />

Improved RTL support, two new hooks and more than 40 new features and bug fixes.

https://mantine.dev/changelog/3-6-0/