https://github.com/donnikitos/react-hook-usemutable
Utilities to use the mutableJS library with React
https://github.com/donnikitos/react-hook-usemutable
front-end frontend hooks react react-hooks react-signals signal-processing signals
Last synced: 4 months ago
JSON representation
Utilities to use the mutableJS library with React
- Host: GitHub
- URL: https://github.com/donnikitos/react-hook-usemutable
- Owner: donnikitos
- License: mit
- Created: 2023-06-29T21:29:10.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-04-21T09:17:00.000Z (about 1 year ago)
- Last Synced: 2025-09-03T14:44:40.623Z (10 months ago)
- Topics: front-end, frontend, hooks, react, react-hooks, react-signals, signal-processing, signals
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hook-usemutable
- Size: 69.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-usemutable
[](https://www.npmjs.com/package/react-hook-usemutable) [](https://github.com/donnikitos/react-hook-useMutable) [](https://github.com/donnikitos/react-hook-useMutable/blob/master/LICENSE)
[](https://github.com/donnikitos/react-hook-useMutable) [](https://github.com/donnikitos/react-hook-useMutable/issues)
A utility to simplify the use of the [@mutableJS/core](https://www.npmjs.com/package/@mutablejs/core) reactivity with React.
## Why?
`react-hook-usemutable` acts as the bridge between the reactivity system of `@mutablejs/core` and the React component lifecycle.
With this utility you will be able to use React in island-style architectures similar to those found in Astro...
## Installation
Install with **npm**:
```bash
npm install @mutablejs/core react-hook-usemutable
```
Install with **yarn**:
```bash
yarn add @mutablejs/core react-hook-usemutable
```
Keep in mind the repository depends on the `@mutablejs/core` package.
## Usage/Examples
**initialize inside of components**
```typescript
import { mutable } from '@mutablejs/core';
import useMutable from 'react-hook-usemutable';
const magicValue = mutable(0);
// Demoing value change
setInterval(() => {
magicValue.value++;
}, 500);
function ShowSomeMagic() {
const value = useMutable(magicValue);
return `Current value: ${value}`;
}
```
**As a state container / store**
```typescript
import { mutable } from '@mutablejs/core';
import { createUseMutable } from 'react-hook-usemutable';
const magicValue = mutable(0);
const useMagicValue = createUseMutable(magicValue);
// Demoing value change
setInterval(() => {
magicValue.value++;
}, 500);
function ShowSomeMagic() {
const value = useMagicValue();
return `Current value: ${value}`;
}
```
## Authors
- [@donnikitos](https://www.github.com/donnikitos)
## Feedback
Any feedback? Join our [Discord server](https://discord.gg/gNdgy8uS3R) and reach out to us.\
We are open to suggestions, ideas and collaboration.
## Support
Love open source? Enjoying my project?\
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.
| via Ko-Fi | Buy me a coffee | via PayPal |
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://ko-fi.com/Y8Y2ALMG) | 
| 
|