# mykiot-ui

> Mykiot UI component

Latest version **1.0.49** (published 2023-02-08) · Mykiot-1.0 license · 0 weekly downloads

## Install

```sh
npm install mykiot-ui
pnpm add mykiot-ui
yarn add mykiot-ui
bun add mykiot-ui
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.49 |
| Published | 2023-02-08 |
| First published | 2022-07-07 |
| Weekly downloads | 0 |
| License | Mykiot-1.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 10 |
| Unpacked size | 381.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mykiot |
| Maintainers | mykiot |
| Keywords | react, typescript, npm |

## Links

- npm: https://www.npmjs.com/package/mykiot-ui
- Repository: https://github.com/mykiot/static
- Homepage: https://github.com/mykiot/static#readme
- Issues: https://github.com/mykiot/static/issues
- npm.io page: https://npm.io/package/mykiot-ui

## Dependencies (10)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@mui/styles](https://npm.io/package/@mui/styles.md) ^5.11.7
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.8.7
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.9.3
- [react-toastify](https://npm.io/package/react-toastify.md) ^9.0.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.9.3
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.8.4
- [@mui/styled-engine-sc](https://npm.io/package/@mui/styled-engine-sc.md) ^5.8.0
- [react-spring-bottom-sheet](https://npm.io/package/react-spring-bottom-sheet.md) ^3.4.1

## 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.49 (latest) — 2023-02-08
- 1.0.48 — 2023-02-06
- 1.0.47 — 2023-02-06
- 1.0.46 — 2022-12-15
- 1.0.45 — 2022-12-14
- 1.0.44 — 2022-12-12
- 1.0.43 — 2022-12-12
- 1.0.42 — 2022-12-09
- 1.0.41 — 2022-11-14
- 1.0.40 — 2022-07-18
- 1.0.39 — 2022-07-15
- 1.0.38 — 2022-07-15
- 1.0.37 — 2022-07-15
- 1.0.36 — 2022-07-15
- 1.0.35 — 2022-07-15
- … 6 more at https://npm.io/package/mykiot-ui/versions

## README

# Mykiot UI Components

A simple React component that counts from 0 - 100 and then resets back to 0. This runs for infinity and yes, this is not meant to be functional in any way.
Demo customize MUI
## How to use

Clone this repo to your local computer, then run:

- `npm install && npm run build`

- To make this component available to other projects on your local computer, run `yarn link`.
- Then go to the project where you want to use this package and run `yarn link "mykiot-ui"`.

Finally, to fix the multiple copies of React bug that shows up with linked React packages:

- navigate to the root of the `mykiot-ui` package
- run `npm link "../path/to/your/project"`

You can now import `mykiot-ui` as a normal package installed from npm like so:

```
import MykiotUI from 'mykiot-ui'
...
```

You can also import the type definitions if you're using TypeScript like so:

```
import MykiotUI, {AppBar} from 'mykiot-ui'
...
```

## Available props

```

className: string (optional)

```

To customise this component, pass in a class name to the `className` prop and style that class name in your custom CSS.

```

// your-component.js
import MykiotUI from 'mykiot-ui'

...
<MykiotUI className="mykiot" />
...

// your-component.css
.mykiot {
  color: white;
  background-color: purple;
}

```

**This component was built for an article on how to publish a React component as a package to npm.**


```theme
cd node_modules/react
yarn link
cd ../react-dom
yarn link
```

``` static
yarn link react
yarn link react-dom
yarn start
```

```theme
yarn link mykiot-ui
yarn dev
```

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