https://github.com/lucifier129/react-use-setup

Implement the mechanism of Vue 3.0 Composition API for React based on React Hooks
https://github.com/lucifier129/react-use-setup

Last synced: 8 months ago
JSON representation

Implement the mechanism of Vue 3.0 Composition API for React based on React Hooks

• Host: GitHub
• URL: https://github.com/lucifier129/react-use-setup
• Owner: Lucifier129
• License: mit
• Created: 2019-08-20T03:15:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-08-26T08:39:13.000Z (almost 7 years ago)
• Last Synced: 2025-04-20T18:40:59.540Z (about 1 year ago)
• Language: TypeScript
• Size: 12.7 KB
• Stars: 30
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Welcome to react-use-setup 👋

[![npm version](https://img.shields.io/npm/v/react-use-setup.svg?style=flat)](https://www.npmjs.com/package/react-use-setup)

[![Build Status](https://travis-ci.org/Lucifier129/react-use-setup.svg?branch=master)](https://travis-ci.org/Lucifier129/react-use-setup)

[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/Lucifier129/react-use-setup#readme)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Lucifier129/react-use-setup/graphs/commit-activity)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/Lucifier129/react-use-setup/blob/master/LICENSE)

[![Twitter: guyingjie129](https://img.shields.io/twitter/follow/guyingjie129.svg?style=social)](https://twitter.com/guyingjie129)

> Implement the mechanism of Vue 3.0 Composition API for React based on React Hooks

### 🏠 [Homepage](https://github.com/Lucifier129/react-use-setup#readme)

## Features

TODO

## Environment Requirement

- ES2015 Proxy

- ES0215 Map

- ES2015 Symbol

[Can I Use Proxy?](https://caniuse.com/#search=Proxy)

## Install

```sh

npm install --save react-use-setup

```

```sh

yarn add react-use-setup

```

## Usage

- Counter Examples

```javascript

import React from 'react'

import { reactive, useSetup } from 'react-use-setup'

let setupCounter = (initialValue = 0) => {

  /**

   * setup function is the mutable world

   */

  let count = reactive({ value: initialValue })

  let incre = () => (count.value += 1)

  let decre = () => (count.value -= 1)

  // expose the reactive state and update functions

  return {

    count,

    incre,

    decre

  }

}

let Counter = props => {

  // react component is the immutable world

  // every time the reactive state is mutated

  // it will emit an immutable state for react component to comsume

  let { count, incre, decre } = useSetup(() => setupCounter(props.count))

  return (

    

      {count.value}

    

  )

}

```

## Author

👤 **Jade Gu**

- Twitter: [@guyingjie129](https://twitter.com/guyingjie129)

- Github: [@Lucifier129](https://github.com/Lucifier129)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/Lucifier129/react-use-setup/issues).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2019 [Jade Gu](https://github.com/Lucifier129).

This project is [MIT](https://github.com/Lucifier129/react-use-setup/blob/master/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_