create-mantine v1.0.12

Create custom react apps

How to use

yarn create mantine app-name

Installed Packages

• Vite - React - Typescript
• React router
• MantineUI
• React Query with default fetcher
• FontAwesome (Used with babel macros to get only what you need)
• Redux Toolkit
• Axios
• Cookie and localStorage helper
• Eslint and Prettier

Fetch Queries with React-Query in many ways

Usage with custom hook

// useUsersQuery.ts

import { useQuery } from "@tanstack/react-query";

export type UsersQuery = {
  id: number;
  name: string;
  username: string;
  email: string;
}[];

const useUsersQuery = () => {
  return useQuery<UsersQuery>({
    queryKey: ["https://jsonplaceholder.typicode.com/users"],
  });
};

export default useUsersQuery;

OR use directly in a page

import { Avatar, Group, Stack, Text } from "@mantine/core";
import { useQuery } from "@tanstack/react-query";

import Page from "@/components/Page";

export type UserProps = {
  id: number;
  name: string;
  username: string;
  email: string;
};

const UsersPage = () => {
  const { data } = useQuery<UserProps[]>({
    queryKey: ["https://jsonplaceholder.typicode.com/users"],
  });

  return (
    <Page title="About">
      <Stack>
        {data?.map((item) => {
          return (
            <Group key={item.id}>
              <Avatar color="red">
                <Text size="xs">{item.name.slice(0, 2)}</Text>
              </Avatar>
              <Text>{item.name}</Text>
            </Group>
          );
        })}
      </Stack>
    </Page>
  );
};

export default UsersPage;

How to use icons

import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
import Icon from "@/components/Icon";

const App = () => {
  return <Icon icon={solid("home")} />;
};

export default App;