react-af
TL;DR
- Allows you to code using certain React.next features today!
- Perfect for component library maintainers.
- It does for React what Babel does for JavaScript.
- Support
getDerivedStateFromProps
on older versions of React. - Supports
Fragment
on older versions of React. - Supports
createContext
(the new context API) on older versions of React.
What is this project?
Starting with React 17, several class component lifecycles will be deprecated:
componentWillMount
, componentWillReceiveProps
, and componentWillUpdate
(see React RFC 6).
One problem that React component library developers face is that they don't control the version of React that they run on — this is controlled by the consuming application. This leaves library developers in a bit of a quandary. Should they use feature detection or code to the lowest denominator?
react-af
emulates newer features of React on older versions,
allowing developers to concentrate on the business problem
and not the environment.
Install
Install react-af
using npm:
$ npm install react-af --save
or with Yarn:
$ yarn add react-af
Import
In your code, all you need to do is change the React import from this:
;
To this:
;
That's it! You can now code your library components as though they are running on a modern React (not all features supported), even though thy may be running on an older version.
react-af
imports from react
under the hood
(it has a peerDependency
of React >=15),
patching or passing through features where necessary.
API
getDerivedStateFromProps
react-af
supports new static lifecycle getDerivedStateFromProps
.
Here is an example component written using
componentWillReceiveProps
.
Component state = text: thispropstext ; { if thispropstext !== nextPropstext this; }
And here it is after converting to be compatible with modern React.
Component state = {}; static { return prevStatetext !== nextPropstext ? text: nextPropstext : null; }
Fragment
Starting with React 16.2, there is a new <Fragment />
component
that allows you to return multiple children.
Prior to 16.2, you needed to wrap multiple children in a wrapping div
.
With react-af
, you can use React.Fragment
on older versions of React as well.
import React Fragment from 'react-af'; const Weather = city degrees <Fragment> <div>city</div> <div>degrees℉</div> </Fragment>;
The code above works natively in React 16.2 and greater.
In lesser versions of React, Fragment
is replaced with a div
automatically.
createContext
React 16.3 also added support for the new context API.
Well react-af
supports that as well.
Here's an example take from Kent Dodds's article React’s new Context API.
; const ThemeContext = state = theme: 'light' { return <ThemeContextProvider value=thisstatetheme> thispropschildren </ThemeContextProvider> } { return <ThemeProvider> <ThemeContextConsumer> <div>val</div> </ThemeContextConsumer> </ThemeProvider> }
Other projects
react-lifecycles-compat
You might also want to take a look at
react-lifecycles-compat
by the
React team.
It doesn't support Fragment
or createContext
and it requires additional
plumbing to setup, but it's lighter and may be adequate for some projets.
create-react-context
If all you need is context support, consider using
create-react-context
,
which is what this package uses to emulate createContext()
.
What's with the name?
ReactAF stands for React Always Fresh (or React As F&#%!). Your choice.