Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. const { Component } = React; const { withProps } = Recompose; // with function as arguement const HomeLink = withProps(({ query }) => ({ href: '#/?qu…
Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field. For example, we have a UserLis…
Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through. In the example, we compose thr…
You can decouple the parent stream Component from the mapped React Component by using props.children instead. This process involves mapping the stream to React’s cloneElement with the children then passing the props in manually. We have the code belo…
Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components. Using componentFromStream: import React from "react" impo…
Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props. withPropsOnCh…
This lesson takes the concept of render props and migrates it over to streaming props by keeping the same example and simple refactoring the Togglecomponent which handles the render prop. const ToggleStream = componentFromStream(props$ => { const { h…
If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that stream with any other components. Configuring your props stream with lenses will allow you to reuse your stream with any React component. Checkout: lens…
Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output.…
Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop. For example,we have a 'redux-react' like app: import React from 'react'; import { withProps } from 'recompose'; // Moc…
Events are the beginning of most every stream. Recompose provides a createEventHandler function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as p…
Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax response and pass it along the stream to use as props in a React Component. import React from "react" import { render } from "react-dom"…
Recompose provides helper functions to stream props using an Observable library of your choice into React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper func…
Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads. import React from 'react'; import { lifecycle, branch, compose, renderComponent } from 'recompose'; // Mock Configuration function…
In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component. However occasionally…
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our th…
When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us…
Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing y…
Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component. import React from 'react'; import { withReducer, withHandlers, compose, lifecycle } from 'recompose'; // Mock Configuration function fe…
Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state. import React from 'react'; import {withReducer, withHa…
Combining input streams then using scan to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component. const Cou…
When you declare your Component and Props in JSX, you can pass those props along to your RxJS stream. This is typically done using switchMap or combineLatest where you can grab from the props from your props$ stream and push them into another stream.…
Learn how to use the ‘branch’ and ‘renderNothing’ higher-ordercomponents to render nothing when a certain prop condition ismet. Sometimes you only want to render a component when validprops exist or are in a certain condition; ‘renderNothing’ isan ea…
Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes! withState: const Statue = withState('sho…
