# create-mantine

> Make a new app with latest repos

Latest version **1.0.12** (published 2022-11-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install create-mantine
pnpm add create-mantine
yarn add create-mantine
bun add create-mantine
```

Provides the command `create-mantine`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2022-11-27 |
| First published | 2022-11-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 64.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Farhad Eidi |
| Maintainers | farhadeidi |

## Links

- npm: https://www.npmjs.com/package/create-mantine
- Repository: https://github.com/farhadeidi/create-mantine
- Homepage: https://github.com/farhadeidi/create-mantine#readme
- Issues: https://github.com/farhadeidi/create-mantine/issues
- npm.io page: https://npm.io/package/create-mantine

## Dependencies (3)

- [g](https://npm.io/package/g.md) ^2.0.1
- [global](https://npm.io/package/global.md) ^4.4.0
- [@vercel/ncc](https://npm.io/package/@vercel/ncc.md) ^0.34.0

## Recent versions

- 1.0.12 (latest) — 2022-11-27
- 1.0.11 — 2022-11-27
- 1.0.9 — 2022-11-27
- 1.0.8 — 2022-11-27
- 1.0.7 — 2022-11-27
- 1.0.6 — 2022-11-27
- 1.0.5 — 2022-11-27
- 1.0.4 — 2022-11-27
- 1.0.3 — 2022-11-27
- 1.0.2 — 2022-11-26
- 1.0.1 — 2022-11-26

## README

# Create custom react apps

### How to use

```sh
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

```ts
// 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

```ts
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

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

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

export default App;
```

---
_Source: https://npm.io/package/create-mantine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._