/react-use-setup

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

Primary LanguageTypeScriptMIT LicenseMIT

Welcome to react-use-setup 👋

npm version Build Status Documentation Maintenance License: MIT Twitter: guyingjie129

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

🤝 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