React TypeScript decorators
typescript decorators for react components state and lifcycle
install
npm install @react-typescript-utils/decorators
code example -
import React from "react";
import "./App.css";
import {
Component,
onMount,
useState,
} from "@react-typescript-utils/decorators";
class App extends Component {
private header = React.createRef<HTMLHeadingElement>();
@onMount()
setHeadlineText() {
console.log("mount");
if (this.header.current) this.header.current.innerHTML = "hello world";
}
@onMount()
setBackground() {
document.body.style.backgroundColor = "#f00";
}
@useState(5) count!: number;
render = () => {
console.log(this.count);
return (
<div>
<h1 ref={this.header}></h1>
<p
onClick={() => {
this.count++;
}}
>
{this.count}
</p>
</div>
);
};
}
console.log(new App({}).count);
export default App;Lifesycle decorators
- onMount ( componentDidMout )
class App {
...
private div = React.createRef<HTMLElement>();
@onMount()
setDivContent() {
if (this.header.current) this.header.current.innerHTML = "hello world";
}
...
}- onWillUnmount ( componentWillUnmount )
class App {
...
private instance = runSomeThing();
@onWillUnmount()
stopInstace() {
this.instance.stop();
}
...
}- onShouldUpdate ( shouldComponentUpdate )
class App {
...
@onShouldUpdate()
update(nextProps: App["props"], nextState: App["state"]) {
if (nextProps.stuff === nextState.that) {
return true;
} else {
return false;
}
}
...
}state
- useState ( shouldComponentUpdate )
class App {
...
@useState(5) count!: number;
render() {
console.log(this.count)
return (
<div>
<h1 ref={this.header}></h1>
<p onClick={() => {
this.count++; // automatic rerender
}}>{this.count}</p>
</div>
);
};
...
}