New React 16.3 context API #153
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add `tsconfig-path-webpack-plugin` in typescript example in order to use the `tsconfig.json` `paths` options as webpack resolves. This lets us use the local dev version of `@uirouter/react` in the example for debugging purposes.
feat(UIRouterConsumer): add new `<UIRouterConsumer>` component to access the router instance via the new context API.
example:
```jsx
import {UIRouterConsumer} from '@uirouter/react';
class SomeComponent extends React.Component {
render () {
const router = this.props.router;
// use the router via props
return <div>whatever</div>
}
}
export default () =>
<UIRouterConsumer>
{router => <SomeComponent router={router} />}
</UIRouterConsumer>
```
BREAKING CHANGE: `@uirouter/react` now uses the new React 16.3 Context API. If you were accessing the router instance via the legacy context api (which was never explecitly supported) you need to update your code accordingly:
before:
```jsx
class SomeComponent extends React.Component {
static contextTypes = {
router: PropTypes.object
}
render () {
// access context via this.context
const router = this.context.router;
// do whatever needed with the router
}
}
```
after:
```jsx
class SomeComponent extends React.Component {
render () {
// access router via props
const router = this.props.router;
// do whatever needed with the router
}
}
// when rendering the component wrap it with the `<UIRouterConsumer>` component
<UIRouterConsumer>
{router => <SomeComponent router={router} />}
</UIRouterConsumer>
```
Closes #54
BREAKING CHANGE: from version `0.7.0` `@uirouter/react` only supports react from version `16.3.x` because of the new Context API. If you need to use it with previous versions of React you should check the `0.6.x`, but bear in mind that it’s no longer supported and it’s advised to update React instead.
Enzyme does not support React 16.3 context API. Patch the package until the package is realsed with the fix. enzymejs/enzyme#1513
|
I discovered yesterday the awesome patch-package tool, and I applied the patch to Once it gets released (last release was in January) we can remove th patch and just use the proper package. In the meantime it works good 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is to track the work needed to support and use the new context api introduced in React 16.3
To get the initial work done I've monkey-patched React type definitions and added a custom
react-16-adapterto get typescript and enzyme to work correctly, but I haven't committed any of this.Things needed are for the release are:
Providers/Consumers APIUIRouterConsumerand possibly new edge cases@typesto officially support React 16.3 (issue)enzymeto officially support React 16.3 (issue)Once everything is addressed we can merge and release
0.7.0🎉