https://github.com/webkrafters/react-observable-context
Observable react context [Eagle Eye] - prevents an automatic total component tree re-rendering at context change.
https://github.com/webkrafters/react-observable-context
connect context hoc hooks react react-context react-hooks state-management usecontext
Last synced: about 2 months ago
JSON representation
Observable react context [Eagle Eye] - prevents an automatic total component tree re-rendering at context change.
- Host: GitHub
- URL: https://github.com/webkrafters/react-observable-context
- Owner: webKrafters
- License: mit
- Created: 2022-11-20T13:24:03.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2026-02-13T20:09:46.000Z (2 months ago)
- Last Synced: 2026-02-14T03:30:35.477Z (2 months ago)
- Topics: connect, context, hoc, hooks, react, react-context, react-hooks, state-management, usecontext
- Language: TypeScript
- Homepage: https://eagleeye.js.org
- Size: 3.25 MB
- Stars: 2
- 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-Observable-Context [Eagle Eye]
COMPATIBLE WITH REACT VERSIONS 16.8 to 18.x.x.
A NEW EAGLEEYE BASED PRODUCT WILL BE DEVELOPED SPECIFICALLY FOR REACT 19+
PLEASE STAY TUNED.
- Ready for use anywhere in the app. No Provider components needed.
- Auto-immutable update-friendly context. See
store.setState(under revision). - A context bearing an observable consumer store (under revision).
- Recognizes negative array indexing. Please see Property Path (under revision) and
store.setStateIndexing (under revision). - Only re-renders subscribing components (clients (under revision)) on context state changes.
- Subscribing component decides which context state properties' changes to trigger its update.
**Name:** React-Observable-Context
**Moniker:** Legacy Eagle Eye
**Usage:** Please see Getting Started (under revision).
**Demo:** [Play with the app on codesandbox (under revision)](https://codesandbox.io/s/github/webKrafters/react-observable-context-app)\
If sandbox fails to load app, please refresh dependencies on its lower left.
**Install:**\
npm install --save @webkrafters/react-observable-context\
## Usage:
```tsx
import { FC } from 'react';
import { createEagleEye } from '@webkrafters/react-observable-context';
const context = createEagleEye(
T|AutoImmutable?,
Prehooks?,
IStorage?
);
// component consuming change stream manually
const useStream = context.useStream;
const Component1 : FC = () => {
const {
data,
resetState,
setState
} = useStream( SelectorMap );
...
};
// components consuming change stream through a reusable adapter
const connect = context.connect( SelectorMap? );
const Component2 = connect(({ data, resetState, setState, ...ownProps }) => {...});
const Component3 = connect(({ data, resetState, setState, ...ownProps }) => {...});
const App : FC = () => (
<>
>
);
```
### Releasing context resources.
```tsx
context.dispose();
```
Deactivates this context by:
- unsubscribing all observers to it
- severing connections to data stores
- unsetting all resources
### Accessing external store reference.
```tsx
const store = context.store;
// https://eagleeye.js.org/concepts/store/resetstate/
store.resetState( Array? );
// https://eagleeye.js.org/concepts/store/setstate/
store.setState( Changes );
// https://eagleeye.js.org/concepts/store/getstate/
const state = store.getState( Array );
// https://eagleeye.js.org/concepts/store/subscribe/
const unsubscribeFn = store.subscribe( eventType, listener );
```
Any actions taken here is applied to all components streaming affected state slices.\
Caveat 1: Parameterless context.store.getState returns the whole state.\
Caveat 2: Parameterless context.store.resetState which is a no-op.
### Joining the context stream.
A context stream allows a client to set up a dedicated channel through which it receives automatic updates whenever its selected slices of state change. It can also update the context through this channel.
```tsx
const useStream = context.stream;
// joining the stream twice
// for more on selectorMap - https://eagleeye.js.org/concepts/selector-map/
const store1 = useStream(SelectorMap?);
const store2 = useStream(SelectorMap?);
// access the current data value monitored by this store
console.log( 'data', store1.data );
// https://eagleeye.js.org/concepts/store/resetstate/
store1.resetState( Array? ); // changes are context-wide
// https://eagleeye.js.org/concepts/store/setstate/
store1.setState( Changes ); // changes are context-wide
```
Any actions taken here is applied to all components streaming affected state slices.\
Caveat 1: Parameterless store.resetState resets state slices consumed by this store.\
Caveat 2: Parameterless store.resetState for stores not consuming state is a no-op.
### Accessing underlying cache.
```tsx
const cache = context.cache;
```
### Accessing `close` status.
```tsx
const closed = context.closed;
```
### Accessing current state update `prehooks`.
```tsx
const prehooks = context.prehooks;
```
### Updating state update `prehooks`.
```tsx
context.prehooks = Prehooks?;
```
### Accessing context `storage`.
```tsx
const storage = context.storage;
```
### Updating context `storage`.
```tsx
context.storage = IStorage?;
```
May also see What's Changed? (currently uunder revision)
## Please see full documentation here:
**[eagleeye.js.org](https://eagleeye.js.org)** (currently out-of-date pending revision)
# License
GPLv3