react-use-setup

Welcome to react-use-setup 👋

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

🏠 Homepage

Features

TODO

Environment Requirement

• ES2015 Proxy
• ES0215 Map
• ES2015 Symbol

Can I Use Proxy?

Install

npm install --save react-use-setup

yarn add react-use-setup

Usage

• Counter Examples

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
• Github: @Lucifier129

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 Jade Gu.

This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator