https://github.com/ethworks/reactive-properties
Simple reactive property system
https://github.com/ethworks/reactive-properties
Last synced: 11 months ago
JSON representation
Simple reactive property system
- Host: GitHub
- URL: https://github.com/ethworks/reactive-properties
- Owner: EthWorks
- License: unlicense
- Created: 2019-09-10T11:09:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T01:01:14.000Z (over 4 years ago)
- Last Synced: 2025-06-03T12:04:19.268Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 302 KB
- Stars: 19
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/reactive-properties)
[](https://circleci.com/gh/UniLogin/reactive-properties/tree/master)
[](https://github.com/UniLogin/reactive-properties/blob/master/UNLICENSE)
# reactive-properties
A lightweight alternative for RX and Redux, that utilises react hooks and dramatically reduces the amount of boiler plate code for the typical React application.
## Installation
```
npm install --save reactive-properties
yarn add reactive-properties
```
## Documetation
### `Property`
```typescript
interface Property {
get(): T // returns the current value
subscribe(callback: () => void): () => void // subscribe to future values
}
```
Property is just a variable that can be observed.
To get the current value use the `get` method. To subscribe to future updates, use the `subscribe` method. Subscribe returns a function which can be called to unsubscribe from updates.
#### Piping
For developer convenience all properties have a `pipe` method. It can be used to apply operators to a property.
```typescript
property.pipe(
withEffect(() => { ... }),
map(x => x * 2),
)
```
### `State`
Simplest property implementation. You provide the default value and can call the `set` method to update the value.
```typescript
const state = new State(5)
console.log(state.get()) // prints 5
state.set(42)
console.log(state.get()) // prints 42
state.subscribe(() => console.log('Update:', state.get()))
state.set(99) // "Update: 99" is printed to the console
```
Sends update notifications to all subscribers when the new value is set.
### `combine`
Used to combine multiple properties into one.
```typescript
const a = new State(2)
const b = new State(2)
const sum = combine([a, b], (a, b) => a + b) // sum is 4
b.set(5) // sum is now 7
a.set(6) // sum is now 11
```
Updates every time when one of the source properties update.
### `map` operator
Works similarly to `Array.map`. Creates a new property which will always have values that are obtained by mapping the original property's values with the provided function.
### `withEffect` operator
Provides a way to add custom imperative logic when something starts observing the property.
```typescript
property.pipe(
withEffect(() => {
console.log('Property started to be observed')
return () => console.log('All observers unsubscribed')
})
)
```
Works similarly to `React`'s `useEffect`. Can be usefull to start and stop background tasks when user visits a specific page, for example.
### `forEach` operator
Calls provided callback for each value that a property has. Including the current one.
### `waitFor` operator
Converts the property to a promise that resolves when the provided predicate returns true. Promise resolves with the first value that matched the predicate.
### `dedupBy` operator
Stops updates when property values don't change. Example:
```typescript
const state = new State(0)
state.forEach(console.log) // prints 0
state.set(0) // nothing printed
state.set(1) // prints 1
state.set(1) // nothing printed
```