https://github.com/nullvoxpopuli/classy-react
https://github.com/nullvoxpopuli/classy-react
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/nullvoxpopuli/classy-react
- Owner: NullVoxPopuli
- License: mit
- Created: 2024-09-09T23:32:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T23:08:46.000Z (almost 2 years ago)
- Last Synced: 2025-04-20T19:41:38.770Z (over 1 year ago)
- Language: JavaScript
- Size: 152 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# classy-react
- Want to use React, but tired of hooks?
- But at the same time, you super appreciate the ergonomics provided in _authoring_ hooks?
- Do you think that not being able to use hooks in classes is silly?
Now you can have the best both worlds, with classy-react!
```jsx
import React from 'react';
import { useState, useHooks } from 'classy-react';
export default @useHooks class App {
@useState accessor count = 5;
render = () => {
return (
<>
this.count += 1}>
count is {this.count}
>
);
}
}
```
## Install
```bash
pnpm add classy-react
```
## API
This library is experimental, and right now only provides three exports:
- `@useHooks` - allows vanilla classes to be used as components -- like with React's own class component, the `render` function is special in that it is used to hold the template of your component.
- `@useState` - `React.useState`, but as a decorator
- `wrap` - utility for making turning your own hooks into decorators, as long as they return the tuple in the form of `[value, setter]` (like `useState` does)
## Notes
- Rules of hooks still apply (albeit now hidden~ish)
- You should never use `this.property = this.property.bind(this)` -- and React should have never recommended you do so.
- This library has no tests (for now)