KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

react-use-setup

★ 31 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 (
    <button onClick={incre} onDoubleClick={decre}>
      {count.value}
    </button>
  )
}
```

## 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

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)_

react-use-setup

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README