open-index/open-npm huggingface dataset:
npm package: @mtjch/editable-form-elements
Description: **_Available props_**
Latest version: 1.0.3

# Editable form elements for vue js 3

### Editable input

**_Available props_**

```
value -> value of input
type -> type of input
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
```

Example

```html

<editable-input
    :default-show-input=true
    value="editable value"
    name="price"
/>
```

---

### Editable select

**_Available props_**

```
value -> value of input
options -> Select options object
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
```

Example

```html

<editable-select
    value="SK"
    :default-show-input=false
    :options="{SK:'Slovakia',CZ:'Czech republic',PL:'Poland'}"
    name="price"
/>
```

---

### Editable textarea

**_Available props_**

```
value -> value of input
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
rows -> columns of textarea
cols -> rows of textarea
maxLength -> Max lenght of string
```

Example

```html

<editable-textarea value="This is text in textarea" name="text-input"/>
```

---

### Editable checkbox

**_Available props_**

```
value -> value of input
options -> checkbox options with two values
name -> name of input send in posted event
show-input -> Boolean value, whether to show value or input on load
```

Example

```html

<editable-checkbox :value=false>
    <template #inputs>
        <input type="hidden" value="hello">
    </template>
</editable-checkbox>
```
npm package: @mtjs/ajax
Description: ajax for axios
Author: LIUTAO
Latest version: 1.1.1

## ajax

对 Axios 进行一定的封装，用于简化接口定义与调用方式，支持 TypeScript

### 安装

```
npm install @mtjs/ajax
```

## 初始化

```js
// ajax.js

import Ajax from "@mtjs/ajax";
import axios from "axios";

axios.defaults.timeout = 60 * 1000;
axios.defaults.baseURL = "https://api.example.com";

// ----------------- 拦截器
// 添加请求拦截器
axios.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么，如添加token config.headers['token'] = window.localstorage.getItem('token')
    return config;
  },
  function(error) {
    // 请求异常处理。。。
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么, 如缓存token window.localstorage.getItem('token', response.headers.token)
    // 权限验证。。。
    // 业务异常处理。。。
    // 请求成功判断，返回成功的数据
    return response.data;
  },
  function(error) {
    // 响应异常处理。。。
    return Promise.reject(error);
  }
);

// 全局配置
const createAjax = new Ajax({
  axios: axios,
  // post请求的数据类型
  dataType: "json",
  // get请求时，参数对象的序列化规则，
  // 默认为 params => qs.stringify(params, { indices: false });
  paramsSerializer,
  // 请求类型为 x-www-form-urlencoded 时，body数据的序列化规则，
  // 默认为： (data:any) => qs.stringify(data, { allowDots: true });
  dataSerializer,
  // 根据不同框架来显示和隐藏 Loading
  loading: {
    show: () => {
      Toast.loading();
    },
    hide: () => {
      Toast.clear();
    }
  },
  // 延迟多少ms 显示Loading，默认为260ms，如果请求在260ms内完成，则不显示loading
  loadingDelay: 260,
  // 统一的异常处理 (所有报错都会到这里)，这里的 message 建议PC端使用 Notifycation， H5端使用 Dialog 来显示
  catch: err => {
    alert(err.message);
  }
});

export default createAjax;
```

### 定义 API

```js
// api.js
import createAjax from "./ajax";

const apis = {
  login: "post /login",
  getUser: id => `get /user/${id}`
};

export default createAjax.regist(apis, "/api");
```

### 使用

api.apiName({ data: {}, ...options})

options的配置项(只针对当前请求的配置)

```js
{
  // 默认为false 是否显示loading
  loading: false,
  // 默认为全局配置的 dataType 请求的数据类型
  dataType: 'json',
  // 默认为true, 是否使用全局的异常捕获(全局异常捕获后，会中断promise链，后面的不会执行)
  catchError:true,
  // 请求头
  headers: {},
  // loading 中的提示
  loadingText='加载中',
  // get请求时，参数对象的序列化规则
  paramsSerializer,
  // 请求类型为 x-www-form-urlencoded 时，body数据的序列化规则
  dataSerializer,
  // 默认为0，不缓存 get 请求时，数据缓存过期时间，单位 s，大于0时缓存，
  expires = 0,
  // axios 其它的 options 配置
  ...others
}
```

```js
import api from './api'

//示例1： 使用全局的异常处理，业务中不用处理异常
async login(){
  const data = {userName: 'jack', passwrod: '12111' }
  const res = await api.login({data, loading: true})
  // 默认，catchError 为 true 时，报错后，后面的代码不会执行，
  console.log(res);
}

//示例2：url params中带参数，自定义异常处理
getUser(userId){
  // url带参数的调用方式
  api.getUser(userId)({
    data:{ a: 1},
    loading: true,
    // 自定义异常处理
    catchError: false,
  }).then(res => {
    console.log(res)
  }).catch(err => {
    // 处理异常
    console.log(err)
  })
}
```
npm package: @mtjs/cli
Description: cli tool for mtjs
Author: hz_liutao@qq.com
Latest version: 0.0.5

---
title: 命令行工具
---

## mt

快速创建页面

### 安装

```bash
npm i -g @mtjs/cli
```



### 创建一个Vue列表页

```
mt list-page <page-name>
```

## 更新日志
npm package: @mtjs/icons
Description: <h1 align="center"> MT Icons for React </h1>
Latest version: 0.1.2

<h1 align="center">
MT Icons for React
</h1>


## Install

```bash
yarn add @mtjs/icons@4.0.0
```

## Basic Usage

You can import it directly or destructure from `@mtjs/icons` when tree-shaking enabled.


## Component Interface

```ts
interface AntdIconProps {
  className?: string;
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  style?: React.CSSProperties;
}
```

## Release

```bash
npm run generate
npm run compile
npm publish
```
npm package: @mtjs/icons-svg
Description: Abstract nodes for mt icons.
Latest version: 0.1.2

<h1 align="center">
MT Icons
</h1>

<p align="center">
⭐ The abstract node of the MT SVG icons.
</p>

## Install

```bash
# use yarn
$ yarn add @mtjs/icons-svg

# or use npm
$ npm install @mtjs/icons --save
```

## Use Library Adapter

- React: See [@mtjs/icons](../icons-react) to learn about detail usage.


## Get started

```ts
import { AccountBookOutlined } from '@mtjs/icons-svg';

console.log(AccountBookOutlined);
// ==>
// {
//   name: 'account-book',
//   theme: 'outlined',
//   icon: {
//     tag: 'svg',
//     attrs: {
//       viewBox: '64 64 896 896',
//       focusable: 'false'
//     },
//     children: [
//       {
//         tag: 'path',
//         attrs: {
//           d:
//             'M880 184H712v-64c0-4.4-3.6-8-8-8h- ...'
//         }
//       }
//     ]
//   }
// };
```

- Interfaces

This library export all SVG files as `IconDefinition`.

```ts
// types.d.ts
export declare type ThemeType = 'filled' | 'outlined' | 'twotone';

export interface AbstractNode {
  tag: string;
  attrs: {
    [key: string]: string;
  };
  children?: AbstractNode[];
}

export interface IconDefinition {
  name: string; // kebab-case-style
  theme: ThemeType;
  icon:
    | ((primaryColor: string, secondaryColor: string) => AbstractNode)
    | AbstractNode;
}
```

## Render Helpers

```ts
import { AccountBookFilled } from '@mtjs/icons-svg';
import { renderIconDefinitionToSVGElement } from '@mtjs/icons-svg/es/helpers';

const svgHTMLString = renderIconDefinitionToSVGElement(AccountBookFilled, {
  extraSVGAttrs: { width: '1em', height: '1em', fill: 'currentColor' }
});

console.log(svgHTMLString);
// ==>
// '<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 0 1 8.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z" /></svg>'
```

- Interfaces

```ts
declare function renderIconDefinitionToSVGElement(
  icon: IconDefinition,
  options?: HelperRenderOptions
): string;

interface HelperRenderOptions {
  placeholders?: {
    primaryColor?: string; // default #333
    secondaryColor?: string; // default #E6E6E6
  };
  extraSVGAttrs?: {
    [key: string]: string;
  };
}
```
npm package: @mtjs/icons-vue
Description: MT Icons for Vue
Latest version: 0.1.2

<h1 align="center">
MT Icons for Vue
</h1>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@mtjs/icons-vue.svg?style=flat)](https://npmjs.org/package/@mtjs/icons-vue)
[![NPM downloads](http://img.shields.io/npm/dm/@mtjs/icons-vue.svg?style=flat)](https://npmjs.org/package/@mtjs/icons-vue)

</div>

## Install

```bash
yarn add @mtjs/icons-vue
```

## Basic Usage

First, you should add the icons that you need into the library.

```js
import Vue from 'vue'
import { Filter } from '@mtjs/icons-vue';
Vue.component(Filter.name, Filter);
```

After that, you can use antd icons in your Vue components as simply as this:

```jsx
<icon-filter />
```

## Build project

```bash
npm run generate # Generate files to ./src
npm run compile # Build library
npm run test # Runing Test
```
npm package: @mtjs/lstore
Description: lstore for localstorage
Author: LIUTAO
Latest version: 0.0.3

## lstore

对 store 进行一定的封装，用于简化 localstorage 的操作

### 安装

```
npm install @mtjs/lstore
```

## 初始化

```js
// lstore.js

import LStore from "@mtjs/lstore";

// 定义key的类型
interface IKeys {
  username: string;
}

// 注册key名
const keys = ["username"];
const prefix = "app/";

const lstore = new LStore() < IKeys > prefix;
const localstore = lstore.init(keys);

export default localstore;
```

### 使用

```js
import lstore from "./lstore";

// 存
lstore.username = "jack";

// 取
console.log(lstore.username);
```

微信 typescript 的定义

https://github.com/gushiaoke/wx-ts/blob/master/%40types/wx-app/index.d.ts
https://github.com/Gemicat/wxapp-typescript/blob/master/typings/wx/lib.wx.api.d.ts
https://github.com/Adherentman/Typescript-wxApi.d.ts/blob/master/wx.d.ts
npm package: @mtjs/mtview
Description: A fast and smooth UI components library of Vue.js 2.0
Author: tangdada, git-lt, mzdeng
Latest version: 2.0.7


<p align="center">
  <a href="http://mtview.mytijian.cn">
      <img width="200" src="https://mytijian-img.oss-cn-hangzhou.aliyuncs.com/official-web/mtview.png">
  </a>
</p>

# mtview

> A fast and smooth UI components library of Vue.js 2.*

> 文档地址(Document): <a href="http://mtview.mytijian.cn">mtview.mytijian.cn</a>

## Components
```
  select
  affix
  none
  group
  checkbox
  leftRightLayout
  scroll(lazyLoad)
  lazyRender
  Choose
  Check
  Select2
  ResultPageList
```

## Directives
```
  tbodyScroll
```

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @mtjs/vui
Description: Mobile UI Components built on Vue
Author: youzanfe
Latest version: 1.0.4

<p align="center">
    <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>

<h1 align="center">Vant</h1>

<p align="center">Mobile UI Components built on Vue</p>

<p align="center">
    <img src="https://img.shields.io/npm/v/vant.svg?style=flat-square" alt="npm version" />
    <img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="npm version" />
    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
    <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
</p>

<p align="center">
  🔥 <a href="https://youzan.github.io/vant">文档网站</a>
  &nbsp;
  &nbsp;
  💡 <a href="https://vant-contrib.gitee.io/vant">国内镜像文档</a>
  &nbsp;
  &nbsp;
  🇨🇳 <a href="./README.zh-CN.md">中文版介绍</a>
  &nbsp;
  &nbsp;
  🚀 <a href="https://github.com/youzan/vant-weapp" target="_blank">小程序版</a>
</p>

---

## Features

- 60+ Reusable components
- 90% Unit test coverage
- Extensive documentation and demos
- Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
- Support Custom Theme
- Support i18n
- Support TS
- Support SSR

## Install

```bash
# Using npm
npm i vant -S

# Using yarn
yarn add vant
```

## Quickstart

```js
import Vue from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';

Vue.use(Button);
```

See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).

## Contribution

Please make sure to read the [Contributing Guide](./.github/CONTRIBUTING.md) before making a pull request.

## Browser Support

Modern browsers and Android 4.0+, iOS 8.0+.

## Links

- [Documentation](https://youzan.github.io/vant)
- [Changelog](https://youzan.github.io/vant#/en-US/changelog)
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)

## Preview

You can scan the following QR code to access the demo：

<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >

## Wechat Group

Scan the qrcode to join our wechat discussion group, please note that you want to join Vant discussion group.

<img src="https://img.yzcdn.cn/vant/wechat_20180606.png" width="220" height="292" >

## LICENSE

[MIT](https://en.wikipedia.org/wiki/MIT_License)
npm package: @mtjs/wxjssdk
Description: wechat jssdk ts
Author: LIUTAO
Latest version: 0.0.3

# `wxjssdk`

> 微信 JSSDK 的 TS 版本，封装了几个常用的 API，用于规范和简化 API 的使用

## Usage

```ts
import wx from '@mtjs/wxjssdk';

// SDK初始化
wx.readyAsync();

// 异步分享
wx.shareAsync();

// 异步支付
wx.payAsync();

// 隐藏功能菜单
wx.hideShareMenus();

// 隐藏底部导航
wx.hideToolbar();
```
npm package: @mtk-router/router-client
Description: MTK Router Automation Platform — TypeScript HTTP client for mtk-serve (/v1/*) with testing utilities.
Latest version: 0.1.1

# @mtk-router/router-client

**MTK Router Automation Platform** — TypeScript/JavaScript HTTP client for **`mtk-serve`** (`/v1/*`), with a **`testing`** entry for local doubles.

- **Install:** `npm install @mtk-router/router-client`
- **Env / service URL:** same ideas as the Python SDK; see [ENVIRONMENT.md](../../docs/ENVIRONMENT.md) for **`MTK_*`** variables.
- **Contract:** OpenAPI is exported by the service at **`GET /openapi.json`**; this package’s types are generated from the committed **`openapi.json`** in this directory.

## Usage

```ts
import { MtkHttpClient } from "@mtk-router/router-client";

const client = new MtkHttpClient({ baseUrl: "http://127.0.0.1:8765" });
// … call typed helpers (see dist/index.d.ts)
```

```ts
import { … } from "@mtk-router/router-client/testing";
```

## Requirements

- **Node.js 18+**
- A running **`mtk-serve`** (or compatible) instance at `baseUrl`.
npm package: @mtk-router/router-ssh
Description: MTK Router Automation Platform — direct SSH to MikroTik RouterOS from Node.js (no mtk-serve / HTTP client).
Latest version: 0.1.1

# @mtk-router/router-ssh

**Node.js (18+)** — SSH **directly** to MikroTik RouterOS. No `mtk-serve`, no `baseUrl`.

**Sources:** `src/index.mjs` uses only TCP SSH (`ssh2` client submodule). It does **not** call `fetch`, `http`, `https`, or `axios`. (`package-lock.json` still lists `https://registry.npmjs.org/…` for installs — that is npm metadata, not runtime code.)

Uses the same environment variables as the Python SDK:

- `MTK_HOST` (default `192.168.88.1`)
- `MTK_USER` (default `admin`)
- `MTK_PASSWORD` (required for password auth)
- `MTK_PORT` (default `22`)
- `MTK_TIMEOUT` (seconds, default `30`)

Full list of **`MTK_*`** names (Python CLI, `mtk-serve`, bootstrap, etc.): [docs/ENVIRONMENT.md](../../docs/ENVIRONMENT.md).

## Install

From the repo:

```bash
cd clients/node-ssh
npm install
```

In another project:

```json
"@mtk-router/router-ssh": "file:../mtk-router-setup/clients/node-ssh"
```

## Example

```javascript
import { MtkSshClient } from "@mtk-router/router-ssh";

const c = new MtkSshClient();
await c.connect();
try {
  const r = await c.exec("/interface l2tp-client print terse");
  console.log(r.stdout);
  const vpn = await c.setPolicyRouteGateway("rt_slot_2", "l2tp-uk");
  if (!vpn.ok) console.error(vpn.stderr || vpn.stdout);
} finally {
  await c.disconnect();
}
```

## Scope

This is a **small** complement to `@mtk-router/router-client` (REST over `mtk-serve`). It covers **exec** and **policy-route gateway** updates. It does **not** replicate full discovery, bootstrap, or leases — use **Python** or **`mtk-serve`** for those, or extend this package.

## Browser

**Not supported** — use `@mtk-router/router-client` with `mtk-serve`, or a backend that uses this module or Python.
npm package: @mtkcs/written-number-currency
Description: Convert money amounts to words using a chosen currency
Author: Marwen Abdesslem
Latest version: 0.5.1

# WrittenNumberCurrency
<a href="https://img.shields.io/travis/mtkcs/written-number-currency?style=plastic">
    <img src="https://img.shields.io/travis/mtkcs/written-number-currency?style=plastic">
</a>
<a href="https://img.shields.io/npm/v/@mtkcs/written-number-currency?style=plastic">
    <img src="https://img.shields.io/npm/v/@mtkcs/written-number-currency?style=plastic">
</a>
<a href="https://img.shields.io/bundlephobia/minzip/@mtkcs/written-number-currency?style=plastic">
    <img src="https://img.shields.io/bundlephobia/minzip/@mtkcs/written-number-currency?style=plastic" >
</a>


# Installation
```
npm i @mtkcs/written-number-currency
```

# Usage
Under the hood **written-number-currency** uses the **written-number** library to convert number to words.

```javascript
const wnc = require('@mtkcs/written-number-currency');

// There are only 2 presets for the moment. You can create your own and submit them
// if you want.
// Import a preset that corresponds to your language-currency combination.
const frDinarPresets = require('@mtkcs/written-number-currency/lib/presets/fr-dinar');

// locales for your language. Check the written-number library for all available locales:
const fr = require('written-number/lib/i18n/fr.json');

// create an instance
const instance = wnc({lang: fr, ...frDinarPresets});

// If we want to get the string representation of 1234 Dinar and 23 millimes (1234.023)
// amount = 1234: amount in dollars (euros, dinars, ...)
// precision = 23: amount in cents (centimes, millimes, ...)
const result = instance({amount: 1234, precision: 23});

console.log(result);
// => mille deux cent trente-quatre dinars et vingt-trois millimes
```

## WrittenNumberCurrency
The arguments are:
- `lang`: **Object**|*required*. A `written-number` valid language object.
- `linker`: **String**|*optional*. The word that links between the **amount** and the **precision**
- `amountFormatter`: **Function**|*required* if `amount` is provided. Function that accepts an amount
 an returns the correct grammatical form of the base currency.
- `precisionFormatter`: **Function**|*required* if `precision` is provided. Function that accepts an amount
 an returns the correct grammatical form of the small currency.
## Presets
Presets are objects that should contain 3 keys:
`linker`
`amountFormatter`
`precisionFormatter`
##### Example:
```javascript
// presets/en-dollar.js
const preset = {
  linker: 'and',
  amountFormatter(amount) {
    if (amount === 1) return 'dollar';
    return 'dollars';
  },
  precisionFormatter(amount) {
    if (amount === 1) return 'cent';
    return 'cents';
  },
}
```
## Instance returned by WrittenNumberCurrency 
The arguments are:
- `amount`: **Positive Integer**|*required* if `precision` was **not** provided. The base currency of your choice, ex: dollar, euro, dinar...
- `precision`: **Positive Integer**|*required* if `amount` was **not** provided. The small currency of your choice, ex: cent, millime, centime...

# Licence
MIT
npm package: @mtkruto/create-auth-string
Description: Generate an [MTKruto auth string](https://mtkru.to/auth-strings/) just by running:
Latest version: 0.0.1

# @mtkruto/auth-string

Generate an [MTKruto auth string](https://mtkru.to/auth-strings/) just by
running:

```shell
deno run -A jsr:@mtkruto/auth-string
```
npm package: @mtliendo/mtliendo-sample-hook
Description: a throwaway example
Author: mtliendo
Latest version: 1.0.0

# mtliendo-sample-hook

> a throwaway example

[![NPM](https://img.shields.io/npm/v/mtliendo-sample-hook.svg)](https://www.npmjs.com/package/mtliendo-sample-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save mtliendo-sample-hook
```

## Usage

```jsx
import React, { Component } from 'react'

import { useMyHook } from 'mtliendo-sample-hook'

const Example = () => {
  const example = useMyHook()
  return (
    <div>{example}</div>
  )
}
```

## License

MIT © [mtliendo](https://github.com/mtliendo)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @mtliendo/react-use-dad-joke
Description: A custom react hook for getting the best dad jokes!
Author: mtliendo
Latest version: 1.0.2

# @mtliendo/react-use-dad-jokes

> A custom react hook for getting the best dad jokes!

[![NPM](https://img.shields.io/npm/v/@mtliendo/react-use-dad-joke.svg)](https://www.npmjs.com/package/@mtliendo/react-use-dad-joke) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @mtliendo/react-use-dad-joke
```

## Usage

```jsx
import React, { Component } from 'react'

import { useDadJoke } from '@mtliendo/react-use-dad-joke'

const App = () => {
  const { isLoading, error, dadJoke } = useDadJoke();

  if (isLoading) return "Loading...";

  if (error) return "uh oh...something went wrong";

  return <main>{dadJoke.joke}</main>;
};
```

## License

MIT © [mtliendo](https://github.com/mtliendo)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @mtlott/react-hello-world
Description: React Component to display "Hello World". (Another Component Nobody Asked For And Nobody Wanted™)
Author: M.T. Lott
Latest version: 0.0.3

# react-hello-world

> React Component to display \"Hello World\". (Another Component Nobody Asked For And Nobody Wanted™)

[![NPM](https://img.shields.io/npm/v/@mtlott/react-hello-world.svg)](https://www.npmjs.com/package/@mtlott/react-hello-world) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @mtlott/react-hello-world
```

## Usage

```jsx
import React, { Component } from 'react'

import HelloWorld from '@mtlott/react-hello-world'

class Example extends Component {
  render() {
    return <HelloWorld />
  }
}
```

## License

MIT © [mtlott](https://github.com/mtlott)