Usage with JavaScript

Is it possible to use Mantine with JavaScript?

Yes, it is possible to use all @mantine/* packages (as well as all other npm packages) with JavaScript. @mantine/* packages are written in TypeScript and have type definitions, so you will get some the benefits of TypeScript (like autocompletion in your IDE) when using them with JavaScript.

Transforming demos code to JavaScript

All demos in Mantine documentation are written in TypeScript. In most cases there is no difference between TypeScript and JavaScript code – you do not have to do anything.

To transform TypeScript code to JavaScript you can use TypeScript playground – paste demo code into the playground and all types will be removed. Note that you will also need to remove type imports from the code.

Example of transformed code:

// TypeScript code
import { Button, ButtonProps } from '@mantine/core';

interface MyButtonProps extends ButtonProps {
  myProp: string;
}

function MyButton({ myProp, ...others }: MyButtonProps) {
  return <Button {...others} />;
}

// JavaScript code
import { Button } from '@mantine/core';

function MyButton({ myProp, ...others }) {
  return <Button {...others} />;
}

Should Mantine be used with JavaScript?

It is recommended to use Mantine with TypeScript, it does not require deep knowledge of TypeScript and will make your code more robust and easier to maintain. For example, you will get type errors when you pass invalid props to components or when you use non-existing props. TypeScript will also help you during migration to new versions of Mantine – you will get type errors when props/components that you have in your code are removed/renamed/changed.

If you are not familiar with TypeScript yet, using Mantine with TypeScript will be a great opportunity to learn it. You can use any of templates to get started – all of them include TypeScript support out of the box.