Mantine Has a Free API That Most Developers Don't Know About

#mantine #react #ui #webdev

Mantine is a full-featured React component library with 100+ hooks, components, and a powerful theming system. Most developers use the basics — here is the hidden power.

Custom Theme

import { MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  primaryColor: "violet",
  fontFamily: "Inter, sans-serif",
  defaultRadius: "md",
  components: {
    Button: { defaultProps: { variant: "filled" } },
    TextInput: { styles: { input: { fontSize: 16 } } }
  }
});

function App() {
  return <MantineProvider theme={theme}><YourApp /></MantineProvider>;
}

Powerful Form Library

import { useForm } from "@mantine/form";

function SignupForm() {
  const form = useForm({
    mode: "uncontrolled",
    initialValues: { email: "", password: "", terms: false },
    validate: {
      email: (v) => (/^\S+@\S+$/.test(v) ? null : "Invalid email"),
      password: (v) => (v.length < 8 ? "Min 8 characters" : null),
      terms: (v) => (v ? null : "Must accept terms")
    }
  });

  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput label="Email" key={form.key("email")} {...form.getInputProps("email")} />
      <PasswordInput label="Password" key={form.key("password")} {...form.getInputProps("password")} />
      <Checkbox label="Accept terms" key={form.key("terms")} {...form.getInputProps("terms", { type: "checkbox" })} />
      <Button type="submit">Sign up</Button>
    </form>
  );
}

Useful Hooks

import { useDisclosure, useDebouncedValue, useClipboard, useMediaQuery } from "@mantine/hooks";

function App() {
  const [opened, { open, close, toggle }] = useDisclosure(false);
  const [search, setSearch] = useState("");
  const [debounced] = useDebouncedValue(search, 300);
  const clipboard = useClipboard({ timeout: 2000 });
  const isMobile = useMediaQuery("(max-width: 768px)");
}

Rich Text Editor

import { RichTextEditor, Link } from "@mantine/tiptap";
import { useEditor } from "@tiptap/react";

const editor = useEditor({
  extensions: [StarterKit, Link],
  content: "<p>Hello world</p>"
});

<RichTextEditor editor={editor}>
  <RichTextEditor.Toolbar>
    <RichTextEditor.Bold />
    <RichTextEditor.Italic />
    <RichTextEditor.Link />
  </RichTextEditor.Toolbar>
  <RichTextEditor.Content />
</RichTextEditor>

Key Features

100+ components with full accessibility
50+ hooks for common patterns
CSS-in-JS with zero-runtime option
Dark mode built-in
Form library with validation

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at spinov001@gmail.com for custom solutions.

DEV Community