https://github.com/prevwong/react-vue-component
Create Vue-like components in React (watchers, computed properties etc)
https://github.com/prevwong/react-vue-component
computed react reactivity vue watcher
Last synced: 6 months ago
JSON representation
Create Vue-like components in React (watchers, computed properties etc)
- Host: GitHub
- URL: https://github.com/prevwong/react-vue-component
- Owner: prevwong
- Created: 2018-11-21T16:27:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-02T17:04:09.000Z (almost 7 years ago)
- Last Synced: 2025-03-25T04:41:21.053Z (7 months ago)
- Topics: computed, react, reactivity, vue, watcher
- Language: TypeScript
- Homepage:
- Size: 16.3 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-vue-component
Build Vue-like components in React. Get the goodness of Vue-reactivty system such as watchers and computed properties and remove the need of using React's `setState` completely.
## Installation
`$ npm install --save react-vue-component`
# Basic Usage
- ```jsx
import {Component} from "react-vue-component";
class App extends Component {
state = {
name: "Bob",
}
componentDidMount() {
this.name = "Albert";
}
watch {
name(newName, oldName) {
console.log("name has changed!");
},
}
computed {
fullName(){
return this.name + " Lolzer";
}
}
methods {
changeName() {
// Changing name will also change the computed property fullName
this.name = "John";
}
}
render() {
// states, methods, and computed properties can be accessed directly via `this` just like in Vue
const {name, fullName, changeName} = this;
return (
)
}
}
```
## Objects
- In Vue, in order to "reactively" add/delete key-value pairs from an object, you will need to use `set(obj, key, value)`and `delete(obj,key)`respectively.
```jsx
import {Component} from "react-vue-component";
class App extends Component {
state = {
obj : {
name: "Prev"
}
}
methods {
addToObj() {
this.set(this.obj, "age", 20);
}
deleteName() {
this.delete(this.obj, "name");
}
}
watch {
// nested watchers
"obj.name" : (newName, oldName) => {
console.log("Obj.name has changed");
}
"obj.age" : (newAge, oldAge) => {
console.log("Obj.age has changed");
}
}
render() {
const {obj} = this;
return (
Object.keys(obj).map(key =>
{key}: {obj[key]}
)
this.addToObj()}>Add new key
this.deleteName()}>Delete name
)
}
}
```
## Caveats
- Behind the scenes,`componentWillMount` is being used to inject Vue's reactivity system thus it is made impossible to overwrite. Instead, use `beforeMount` as an equivalent replacement:
- ```jsx
import {Component} from "react-vue-component";
class App extends Component {
beforeMount(){
console.log("before mount! component hasnt render yet...")
}
...
}
```
# Credits
- All credits to the Vue core team for their awesome reactivity system.