# @achyutn/mui-comps

> Reusable MUI components with react-hook-form

Latest version **1.0.0** (published 2023-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @achyutn/mui-comps
pnpm add @achyutn/mui-comps
yarn add @achyutn/mui-comps
bun add @achyutn/mui-comps
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-09-02 |
| First published | 2023-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 52.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Achyut Neupane |
| Maintainers | achyutneupane |
| Keywords | mui, react, javascript, typescript, components |

## Links

- npm: https://www.npmjs.com/package/@achyutn/mui-comps
- Repository: https://github.com/AchyutProj/MUIComps
- Homepage: https://github.com/AchyutProj/MUIComps#readme
- Issues: https://github.com/AchyutProj/MUIComps/issues
- npm.io page: https://npm.io/package/@achyutn/mui-comps

## Dependencies (17)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.9
- [react](https://npm.io/package/react.md) ^18.2.0
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-redux](https://npm.io/package/react-redux.md) ^8.1.2
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.7
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.45.4
- [react-hot-toast](https://npm.io/package/react-hot-toast.md) ^2.4.1
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.9.5
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.7
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.15.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.11
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.14.7
- [@mui/x-date-pickers](https://npm.io/package/@mui/x-date-pickers.md) ^6.12.1
- [vite-tsconfig-paths](https://npm.io/package/vite-tsconfig-paths.md) ^4.2.0
- [material-react-table](https://npm.io/package/material-react-table.md) ^1.14.0
- [@mui/styled-engine-sc](https://npm.io/package/@mui/styled-engine-sc.md) ^5.14.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-09-02

## README

# MUI Components

[![Publish to NPMJS](https://github.com/AchyutProj/MUIComps/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/AchyutProj/MUIComps/actions/workflows/npm-publish.yml)

## Introduction

Feel free to use it. Introduction section coming soon.

## Setup

Run the following command:

```bash
cp .env{.example,}
```

Use following to setup the package:

```text
APP_NAME={APP NAME}
VITE_API_ENDPOINT={API ENDPOINT}
LOGIN_TOKEN = {LOGIN TOKEN NAME}
USER_VALUE={USER DATA VALUE}
```

You can access these values by importing

```typescript jsx
import {KEY} from "@an/env";
```

### Example:

```typescript jsx
import {APP_NAME} from "@an/env";

return (
    <>
        App Name: {APP_NAME}
    </>
)
```

### Default Value

```text
APP_NAME = "Application"
VITE_API_ENDPOINT = "https://localhost:8000"
LOGIN_TOKEN = "_an_token"
USER_VALUE = "_an_user"
```


## Initialization

Copy the following code and replace in `main.tsx` file:

```typescript jsx
import ReactDOM from 'react-dom/client'
import store from "@an/env";
import {Provider} from "react-redux";
import {BrowserRouter} from "react-router-dom";
import ANRoutes from "@anWrappers/ANRoutes.tsx";
import ANLayout from "@anWrappers/ANLayout.tsx";
import ThemeWrapper from "@anWrappers/ThemeWrapper.tsx";

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <>
        <Provider store={store}>
            <BrowserRouter>
                <ThemeWrapper>
                    <ANLayout>
                        <ANRoutes/>
                    </ANLayout>
                </ThemeWrapper>
            </BrowserRouter>
        </Provider>
    </>
)
```

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