{"id":13726001,"url":"https://github.com/donavon/react-af","last_synced_at":"2025-04-30T03:49:51.259Z","repository":{"id":30522427,"uuid":"125226976","full_name":"donavon/react-af","owner":"donavon","description":"Allows you to code using certain React.next features today! Perfect for component library maintainers.","archived":false,"fork":false,"pushed_at":"2024-09-05T16:18:53.000Z","size":195,"stargazers_count":139,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-30T03:49:41.749Z","etag":null,"topics":["context","polyfill","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/donavon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-14T14:37:52.000Z","updated_at":"2025-03-23T10:11:52.000Z","dependencies_parsed_at":"2024-10-25T18:26:09.408Z","dependency_job_id":"fb400418-b9b8-45d8-80fe-44d8c602a44b","html_url":"https://github.com/donavon/react-af","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-af","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-af/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-af/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-af/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/react-af/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251638760,"owners_count":21619663,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context","polyfill","react"],"created_at":"2024-08-03T01:02:46.704Z","updated_at":"2025-04-30T03:49:51.236Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-af\n[![Build Status](https://travis-ci.org/donavon/react-af.svg?branch=master)](https://travis-ci.org/donavon/react-af) [![npm version](https://img.shields.io/npm/v/react-af.svg)](https://www.npmjs.com/package/react-af)\n\n![React AF graffiti wall](https://user-images.githubusercontent.com/887639/37485417-c7c50fb8-2861-11e8-8e64-363c0e02372a.png)\n\n## TL;DR\n\n- Allows you to code using certain React.next features today!\n- Perfect for component library maintainers.\n- It does for React what Babel does for JavaScript.\n- Support `getDerivedStateFromProps` on older versions of React.\n- Supports `Fragment` on older versions of React.\n- Supports `createContext` (the new context API) on older versions of React.\n\n## What is this project?\n\nStarting with React 17, several class component lifecycles will be deprecated:\n`componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` (see [React RFC 6](https://github.com/reactjs/rfcs/pull/6)). \n\nOne problem that React component library developers face is that they don't control the version of React that they run on —\nthis is controlled by the consuming application.\nThis leaves library developers in a bit of a quandary.\nShould they use feature detection or \ncode to the lowest denominator?\n\n`react-af` emulates newer features of React on older versions,\nallowing developers to concentrate on the business problem\nand not the environment.\n\n## Install\n\nInstall `react-af` using npm:\n```sh\n$ npm install react-af --save\n```\n\nor with Yarn:\n```sh\n$ yarn add react-af\n```\n\n## Import\n\nIn your code, all you need to do is change the React import from this:\n```js\nimport React from 'react';\n```\n\nTo this:\n```js\nimport React from 'react-af';\n```\n\nThat's it! You can now code your library components as though\nthey are running on a modern React (not all features supported... yet), \neven though your code may be running on an older version.\n\n`react-af` imports from `react` under the hood\n(it has a `peerDependency` of React \u003e=15),\npatching or passing through features where necessary.\n\n## API\n\nHere are the modern React features that you can use, even if yur code is running\non older version of React 15 or React 16.\n\n### `getDerivedStateFromProps`\n\n`react-af` supports new static lifecycle `getDerivedStateFromProps`. \n\nHere is an example component written using\n`componentWillReceiveProps`.\n```js\nclass ExampleComponent extends React.Component {\n  state = { text: this.props.text };\n\n  componentWillReceiveProps(nextProps) {\n    if (this.props.text !== nextProps.text) {\n      this.setState({\n        text: nextProps.text\n      });\n    }\n  }\n}\n```\n\nAnd here it is after converting to be compatible with modern React.\n```js\nclass ExampleComponent extends React.Component {\n  state = {};\n\n  static getDerivedStateFromProps(nextProps, prevState) {\n    return prevState.text !== nextProps.text\n      ? {\n        text: nextProps.text\n      }\n      : null;\n  }\n}\n```\n\n### Fragment\n\nStarting with React 16.2, there is a new `\u003cFragment /\u003e` component\nthat allows you to return multiple children.\nPrior to 16.2, you needed to wrap multiple children in a wrapping `div`.\n\nWith `react-af`, you can use `React.Fragment` on older versions of React as well.\n\n```jsx\nimport React, { Fragment } from 'react-af';\n\nconst Weather = ({ city, degrees }) =\u003e (\n  \u003cFragment\u003e\n    \u003cdiv\u003e{city}\u003c/div\u003e\n    \u003cdiv\u003e{degrees}℉\u003c/div\u003e\n  \u003c/Fragment\u003e\n);\n```\n\nThe code above works natively in React 16.2 and greater. \nIn lesser versions of React, `Fragment` is replaced with a `div` automatically.\n\n### createContext\n\nReact 16.3 also added support for the new context API.\nWell `react-af` supports that as well.\n\nHere's an example take from Kent Dodds's article\n[React’s new Context API](https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b).\n\n```js\nimport React, { createContext, Component } from 'react-af';\n\nconst ThemeContext = createContext('light')\nclass ThemeProvider extends Component {\n  state = {theme: 'light'}\n  render() {\n    return (\n      \u003cThemeContext.Provider value={this.state.theme}\u003e\n        {this.props.children}\n      \u003c/ThemeContext.Provider\u003e\n    )\n  }\n}\nclass App extends Component {\n  render() {\n    return (\n      \u003cThemeProvider\u003e\n        \u003cThemeContext.Consumer\u003e\n          {val =\u003e \u003cdiv\u003e{val}\u003c/div\u003e}\n        \u003c/ThemeContext.Consumer\u003e\n      \u003c/ThemeProvider\u003e\n    )\n  }\n}\n```\n\n## Other projects\n\n### `react-lifecycles-compat`\n\nYou might also want to take a look at\n`react-lifecycles-compat` by the\n[React team](https://github.com/reactjs/react-lifecycles-compat).\nIt doesn't support `Fragment` or `createContext` and it requires additional\nplumbing to setup, but it's lighter and may be adequate for some projets.\n\n### `create-react-context`\n\nIf all you need is context support, consider using\n[`create-react-context`](https://github.com/jamiebuilds/create-react-context),\nwhich is what this package uses to emulate `createContext()`.\n\n## What's with the name?\n\nReactAF  stands for React Always Fresh (or React As F\u0026#%!).\nYour choice.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Freact-af","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Freact-af","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Freact-af/lists"}