# @mecute/design

> design system for mecute

Latest version **0.4.14** (published 2023-06-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install @mecute/design
pnpm add @mecute/design
yarn add @mecute/design
bun add @mecute/design
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.14 |
| Published | 2023-06-28 |
| First published | 2023-02-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | SeongHoon Oh |
| Maintainers | seonghoon_oh |
| Keywords | mecute, design, system |

## Links

- npm: https://www.npmjs.com/package/@mecute/design
- npm.io page: https://npm.io/package/@mecute/design

## Dependencies (13)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [i18next](https://npm.io/package/i18next.md) ^22.4.10
- [@rneui/base](https://npm.io/package/@rneui/base.md) ^4.0.0-rc.7
- [@rneui/themed](https://npm.io/package/@rneui/themed.md) ^4.0.0-rc.7
- [patch-package](https://npm.io/package/patch-package.md) ^6.4.7
- [react-i18next](https://npm.io/package/react-i18next.md) ^12.2.0
- [react-native-elements](https://npm.io/package/react-native-elements.md) ^3.4.3
- [postinstall-postinstall](https://npm.io/package/postinstall-postinstall.md) ^2.1.0
- [react-children-utilities](https://npm.io/package/react-children-utilities.md) ^2.8.0
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^9.2.0
- [react-native-iphone-x-helper](https://npm.io/package/react-native-iphone-x-helper.md) ^1.3.1
- [react-native-linear-gradient](https://npm.io/package/react-native-linear-gradient.md) ^2.5.6
- [react-native-safe-area-context](https://npm.io/package/react-native-safe-area-context.md) ^4.5.0

## Recent versions

- 0.4.14 (latest) — 2023-06-28
- 0.4.13 — 2023-06-26
- 0.4.12 — 2023-06-26
- 0.4.11 — 2023-06-26
- 0.4.10 — 2023-05-26
- 0.4.8 — 2023-05-26
- 0.4.7 — 2023-05-26
- 0.4.6 — 2023-05-26
- 0.4.5 — 2023-05-26
- 0.4.4 — 2023-05-25
- 0.4.3 — 2023-05-25
- 0.4.2 — 2023-05-25
- 0.4.0 — 2023-05-23
- 0.3.0 — 2023-04-04
- 0.2.0 — 2023-03-23
- … 10 more at https://npm.io/package/@mecute/design/versions

## README

# Mecute Design Module for ReactNative

## peer dependency

- react-native: 0.68.1

## How to install

```
npm install @mecute/design

<!-- for iOS -->
cd ios && pod install
```

<br/>

## StyleButton

```
import React from 'react';
import { View } from "react-native";
import { StyleButton } from "@mecute/design";


function App () {
  const handleButtonPress = () => {
    console.log("Button Pressed!");
  };

  return (
    <View>
      <StyleButton
        theme="gray"
        type="enabled"
        size="xl"
        onPress={handleButtonPress}
        pressOption={["debounce", 250]}  // throttle, debounce feature with duration
        buttonStyle={{ backgroundColor: "blue" }}   // custom button style
        textStyle={{ color: "red" }}  // custom text style
      >
        TEXT HERE
      </StyleButton>
    </View>
  )
};

export default App;
```

<br />
<br />

## Switch

```
import React, { useState } from 'react';
import { View } from "react-native";
import { Switch } from "@mecute/design";

function App() {
  const [checked, setChecked] = useState<boolean>(false);

  return (
    <Switch
      checked={checked}
      setChecked={setChecked}
      scale={1}
    />
  );
};

export default App;
```

<br />
<br />

## Skeleton

Skeleton UI Pages

- <Skeleton.Profile />
- <Skeleton.ListView />
- <Skeleton.DetailView />

```
import React, { useState } from 'react';
import { View } from "react-native";
import { Skeleton } from "@mecute/design";

function App() {
  const [isLoading, setIsLoading] = useState<boolean>(false);

  ...

  return (
    ...
    {isLoading && <Skeleton.ListView />}
  );
};

export default App;
```

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