react-streams
Installation
Install both react-streams
and rxjs
npm i react-streams rxjs
Build Status
About
react-streams
enables you to stream from a source or props. The stream will pass through a pipe
and new values will often be pushed through by plans
.
Stream from sources
<Stream source={}/>
- A component that subscribes to a source
and streams values to children. The stream will pass through a pipe
.
<Stream source=source$><div>valuesmessage</div></Stream>
stream(source)
- Creates a named component that subscribes to a source
and streams values to children. The stream will pass through a pipe
.
const MyStreamingComponent =<MyStreamingComponent><div>valuesmessage</div></MyStreamingComponent>
Stream from props
<StreamProps/>
- A component that streams props changes to children. Changes to props will pass through the pipe
and can be updated by plans
.
<StreamProps message=message><div>valuesmessage</div></StreamProps>
streamProps()
- Create a named component that streams props changes to children. Changes to props will pass through the pipe
and can be updated by plans
.
const MyStreamingPropsComponent =<MyStreamingComponent message=message><div>valuesmessage</div></MyStreamingComponent>
pipe
Stream through pipe
is any operator (or piped
combination of operators) that you want to act on your stream. Pipes can be simple mappings or complex ajax requests with timing as long as they return a function that returns an object which matches the children
's arguments.
<StreamPropsmessage=messagepipe=><div>valuesmessage</div></StreamProps>
plan
to update
Make a plan
is a function that can be observed.
const update =//logs "Hello"//logs "Friends"
Examples
Enough chit-chat, time for examples!
Play with Examples at codesandbox.io
<Stream/>
const startWithAndDelay = const message$ = of message: "Hello" <div> <h2>Stream as a Component</h2> <Stream source=message$ pipe= > <div>message</div> </Stream> <Stream source=message$ pipe= > <div>message</div> </Stream> </div>
stream
const count$ = const Counter = <div> <h2>Subscribe to a Stream</h2> <Counter> <div>count</div> </Counter> </div>
pipe
const stream$ = of greeting: "Hello" name: "world" const mapToMessage = const Greeting = <div> <h2>Pipe Stream Values</h2> <Greeting> <div>message</div> </Greeting> </div>
streamProps
const mapGreeting = const HelloWorld = <div> <h2>Stream Props to Children</h2> <HelloWorld greeting="Hello" name="world"> <div>message</div> </HelloWorld> <HelloWorld greeting="Bonjour" name="John"> <div>message</div> </HelloWorld> </div>
Ajax
const getTodo = const Todo = const url = processenvDEV ? "/api/todos" : "https://dandelion-bonsai.glitch.me/todos" <div> <h2>Ajax Demo</h2> <Todo url=url id=2> <div> id text </div> </Todo> <Todo url=url id=3> <div> id text </div> </Todo> </div>
Nested Streams
const count$ = const odds = const evens = <Stream source=count$> <div style= padding: "2rem" > <h2> Stream with Nested StreamProps Components </h2> <StreamProps count=count> <div>No filter: count</div> </StreamProps> <StreamProps count=count pipe=odds> <div>Odds: count</div> </StreamProps> <StreamProps count=count pipe=evens> <div>Evens: count</div> </StreamProps> </div> </Stream>
plan
Create a
const onChange = <div> <h2>Update a Stream with Plans</h2> <StreamProps message="Hello" plans= onChange > <div> <input id="input" type="text" onChange=onChange /> <div id="message">message</div> </div> </StreamProps> </div>
scanPlans
const handleInput = const Typeahead = const url = processenvDEV ? "/api/people" : "https://dandelion-bonsai.glitch.me/people" <Typeahead url=url people=> <div> <h2>Search a username: term</h2> <input type="text" onChange=onChange placeholder="Type to seach" autoFocus /> <ul> people </ul> </div> </Typeahead>
Counter Demo
const onInc = const onDec = const onReset = const Counter = <Counter count=4> <div> <button id="dec" onClick=onDec aria-label="decrement" > - </button> <span id="count" aria-label="count"> count </span> <button id="inc" onClick=onInc aria-label="increment" > + </button> <button onClick=onReset aria-label="reset"> Reset </button> </div> </Counter>