Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/innocces/taro-hooks

Hooks Library for Taro
https://github.com/innocces/taro-hooks

api composition-api-vue3 es hooks javascript lib library miniprogram monorepo pnpm pnpm-workspaces react react-native rn taro typescript vue web webpack wechat

Last synced: about 1 month ago
JSON representation

Hooks Library for Taro

Awesome Lists containing this project

README

        



taro hooks logo





V2 |
V1





npm package
node compatibility
build status
discord chat
vercel





Hooks Library for Taro




## ✨ Features

- Fully matched Taro
- Extending common hooks with ahooks
- Separate abstraction useRequest
- Complete type tips
- Extended h5 missing apis

## 🚀 Quick Start

```bash
# npm
$ npm i taro-hooks
# yarn
$ yarn add taro-hooks
# pnpm
$ pnpm add taro-hooks
```

We use plugins for extending different frameworks. So you need to install the corresponding plugins according to the framework you are currently using

- React/PReact/Nerv

```bash
# npm
$ npm i @taro-hooks/plugin-react
# yarn
$ yarn add @taro-hooks/plugin-react
# pnpm
$ pnpm add @taro-hooks/plugin-react
```

```js
// config/index.js
module.exports = {
// ...
plugins: ['@taro-hooks/plugin-react'],
// ...
};
```

- Vue3

```bash
# npm
$ npm i @taro-hooks/plugin-vue
# yarn
$ yarn add @taro-hooks/plugin-vue
# pnpm
$ pnpm add @taro-hooks/plugin-vue
```

```js
// config/index.js
module.exports = {
// ...
plugins: ['@taro-hooks/plugin-vue'],
// ...
};
```

## ⌨️ Usage

- React/PReact/Nerv

```jsx
import { useEnv } from 'taro-hooks';

function Index() {
const env = useEnv();

return current env: {env};
}
```

- Vue3

```html

current env: {{env}}

import { useEnv } from 'taro-hooks';

const env = useEnv();

```

## 🎰 auto-import

We provide the @taro-hooks/plugin-auto-import plugin to help you quickly use the [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) capability.

```bash
# npm
$ npm i @taro-hooks/plugin-auto-import
# yarn
$ yarn add @taro-hooks/plugin-auto-import
# pnpm
$ pnpm add @taro-hooks/plugin-auto-import
```

```js
// config/index.js
const config = {
// ...
// The main prerequisite is that you have installed the plugin for the corresponding framework.
plugins: [
// If you are using vue3, please install the @taro-hooks/plugin-vue plugin beforehand.
'@taro-hooks/plugin-vue',
// If using React/PReact/Nerv, please pre-install the @taro-hooks/plugin-react plugin.
'@taro-hooks/plugin-react',
// Finally, the auto-import plugin is configured
[
'@taro-hooks/plugin-auto-import',
{
// your options, see configuration: https://github.com/antfu/unplugin-auto-import#configuration
}
]
],
// ...
};
```

- React/PReact/Nerv

```jsx
function Index() {
const env = useEnv();

return current env: {env};
}
```

- Vue3

```html

current env: {{env}}

const env = useEnv();

```

## 📦 Packages

| packages | downloads | version | license |
| :-------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
| ![taro-hooks](https://img.shields.io/badge/taro--hooks-pkg-blueviolet?) | ![taro-hooks](https://img.shields.io/npm/dm/taro-hooks.svg) | ![taro-hooks](https://img.shields.io/npm/v/taro-hooks?) | ![taro-hooks](https://img.shields.io/npm/l/taro-hooks?) |
| ![@taro-hooks/ahooks](https://img.shields.io/badge/%40taro--hooks%2Fahooks-pkg-blueviolet?) | ![@taro-hooks/ahooks](https://img.shields.io/npm/dm/@taro-hooks/ahooks.svg) | ![@taro-hooks/ahooks](https://img.shields.io/npm/v/@taro-hooks/ahooks?) | ![@taro-hooks/ahooks](https://img.shields.io/npm/l/@taro-hooks/ahooks?) |
| ![@taro-hooks/plugin-vue](https://img.shields.io/badge/%40taro--hooks%2Fplugin--vue-pkg-blueviolet?) | ![@taro-hooks/plugin-vue](https://img.shields.io/npm/dm/@taro-hooks/plugin-vue.svg) | ![@taro-hooks/plugin-vue](https://img.shields.io/npm/v/@taro-hooks/plugin-vue?) | ![@taro-hooks/plugin-vue](https://img.shields.io/npm/l/@taro-hooks/plugin-vue?) |
| ![@taro-hooks/plugin-react](https://img.shields.io/badge/%40taro--hooks%2Fplugin--react-pkg-blueviolet?) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/dm/@taro-hooks/plugin-react.svg) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/v/@taro-hooks/plugin-react?) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/l/@taro-hooks/plugin-react?) |
| ![@taro-hooks/use-request](https://img.shields.io/badge/%40taro--hooks%2Fuse--request-pkg-blueviolet?) | ![@taro-hooks/use-request](https://img.shields.io/npm/dm/@taro-hooks/use-request.svg) | ![@taro-hooks/use-request](https://img.shields.io/npm/v/@taro-hooks/use-request?) | ![@taro-hooks/use-request](https://img.shields.io/npm/l/@taro-hooks/use-request?) |
| ![@taro-hooks/plugin-auto-import](https://img.shields.io/badge/%40taro--hooks%2Fplugin--auto--import-pkg-blueviolet?) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/dm/@taro-hooks/plugin-auto-import.svg) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/v/@taro-hooks/plugin-auto-import?) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/l/@taro-hooks/plugin-auto-import?) |

## 🗨️ Communication

















## 🤸 Contribution

See [Contributing Guide](CONTRIBUTING.md).

## 🍻 Contributors



innocces

💬 📖 👀 📢 🤔 ⚠️ 📦 📋 🎨

ryan

📖 📢 🤔 💻

[more contributors](https://github.com/innocces/taro-hooks/blob/main/CONTRIBUTORS.md)

## 📑 License

[MIT](LICENSE).

## 💰 Sponsoring












## 📈 Star History

[![Star History Chart](https://api.star-history.com/svg?repos=innocces/taro-hooks&type=Date)](https://star-history.com/#innocces/taro-hooks&Date)