react-data-context
v1.0.5
Published
React's data context, just made global
Downloads
13
Readme
react-data-context
Super simple Context-like library for sharing state/context between components.
Unlike React's own context, this one has a globally defined shared state, and changes to a context will affect every single component that listens to that particular context
To consume a context, here is a sample class (with TypeScript annotations):
import * as React from "react";
import * as ReactDataContext from "react-data-context";
export class ConsumerSample extends React.Component<{}, {}> {
public render() {
return (
<ReactDataContext.Consumer context="foo">
{(data: string) => <div>{data}</div>}
</ReactDataContext.Consumer>
);
}
}
And to produce:
import * as React from "react";
import { render } from "react-dom";
import { ConsumerSample } from "./ConsumerSample";
import * as ReactDataContext from "react-data-context";
interface AppState {
name: string;
}
class ProducerSample extends React.Component<{}, AppState> {
constructor(props: {}) {
super(props);
this.state = { name: "" };
}
onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ name: e.currentTarget.value });
ReactDataContext.Producer.update("foo", e.currentTarget.value);
};
public render() {
return (
<div>
<ConsumerSample />
<input value={this.state.name} onChange={this.onChange} />
</div>
);
}
}