Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any plans to use forwardRef with injectIntl? #1211

Closed
esellin opened this issue Nov 7, 2018 · 3 comments · Fixed by #1271
Closed

Any plans to use forwardRef with injectIntl? #1211

esellin opened this issue Nov 7, 2018 · 3 comments · Fixed by #1271

Comments

@esellin
Copy link

esellin commented Nov 7, 2018

Currently, If I use injectIntl(), I need to call getWrappedInstance() to access the wrapped instance.

It would be much easier if I could just assign a ref, and that ref would transparently be forwarded to the wrapped instance, so I ended up writing the HOC below.

Any plans to support this in a future version of react-intl, or have I lost the plot?

function withIntl(Component) {
  class Wrapper extends React.Component {
    render() {
      const {innerRef, ...props} = this.props;
      return (
        <Component
          ref={innerRef}
          {...props} />
      );
    }
  };
  const IntlWrapper = injectIntl(Wrapper);
  return forwardRef((props, ref) => (
    <IntlWrapper {...props} innerRef={ref} />
  ));
};
@marcesengel
Copy link
Collaborator

This would drop support for older react versions...

@antoinerousseau
Copy link

that's what semver is for

@HauptmannEck
Copy link

HauptmannEck commented Mar 28, 2019

I would like to revive this issue, as I just ran into this in my project. Trying to add react-intl currently doesn't allow you to code as you would expect if you use with the new ref api. Especially if you have Typescript mixed into the fray.

mrijke pushed a commit to mrijke/react-intl that referenced this issue May 3, 2019
Deprecate withRef and use forwardRef prop instead.
When forwardRef is true, the ref passed to the injected component
will be passed down to the wrapped component.

Display a invariant message when withRef is used.

Closes formatjs#1211.
mrijke added a commit to mrijke/react-intl that referenced this issue May 3, 2019
Deprecate withRef and use forwardRef prop instead.
When forwardRef is true, the ref passed to the injected component
will be passed down to the wrapped component.

Display a invariant message when withRef is used.

Closes formatjs#1211.
mrijke added a commit to mrijke/react-intl that referenced this issue May 16, 2019
Deprecate withRef and use forwardRef prop instead.
When forwardRef is true, the ref passed to the injected component
will be passed down to the wrapped component.

Display a invariant message when withRef is used.

Closes formatjs#1211.
mrijke added a commit to mrijke/react-intl that referenced this issue May 19, 2019
Deprecate withRef and use forwardRef prop instead.
When forwardRef is true, the ref passed to the injected component
will be passed down to the wrapped component.

Display a invariant message when withRef is used.

Closes formatjs#1211.
redonkulus pushed a commit that referenced this issue May 27, 2019
…#1271)

* Deprecate withRef in favor of forwardRef and React.forwardRef

Deprecate withRef and use forwardRef prop instead.
When forwardRef is true, the ref passed to the injected component
will be passed down to the wrapped component.

Display a invariant message when withRef is used.

Closes #1211.

* Refactor withIntl to be composable

Refactor the call to withIntl to allow for HoC composing, such as:

export default compose(
  connect(...conntextOptions),
  withIntl(intlOptions)
)

This is done without changing the main API, options can still be passed
in as second arguments to withIntl too.

Add 'react-is' as a strict dependency, change the rollup config to be
able to properly build with it.
longlho added a commit that referenced this issue Jun 16, 2019
- Migrate all src/ to TypeScript. There will be a follow up diff to
improve types since there're a lot of `any` casting right now.
- Reduce bundle size by removing `prop-types` dependency.
- BREAKING CHANGE: Remove `intlShape` from top level export. `IntlShape`
interface should replace that.
- Reduce bundle size by removing `react-is`. This is the result of
changing `withIntl` API to a strict `withIntl(Component, opts)` instead
of the previous `componentOrOptions` 1st param introduced in #1211.
Makes typechecking more straightforward.
- Fix tests & remove redundant tests
longlho added a commit that referenced this issue Jun 17, 2019
* migrate src to TS
- Migrate all src/ to TypeScript. There will be a follow up diff to
improve types since there're a lot of `any` casting right now.
- Reduce bundle size by removing `prop-types` dependency.
- BREAKING CHANGE: Remove `intlShape` from top level export. `IntlShape`
interface should replace that.
- Reduce bundle size by removing `react-is`. This is the result of
changing `withIntl` API to a strict `withIntl(Component, opts)` instead
of the previous `componentOrOptions` 1st param introduced in #1211.
Makes typechecking more straightforward.
- Fix tests & remove redundant tests
- rm react-is from rollup config
- make WrappedComponentProps take in generic, rm withRef
- update Upgrade Guide
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants