feat: add fromRenderProps [BREAKING CHANGES]

[evenchange4]

This PR is a proposal for issue #609.
In my opinion, the original withRenderProps HOC should rename to toRenderProps.

1. HOC → RenderPropsComponent: withRenderProps toRenderProps
2. HOC ← RenderPropsComponent: withConsumerProps withRenderProps fromRenderProps

---

UPDATE:

• rename original withRenderProps to toRenderProps [BREAKING CHANGES]
• add withConsumerProps fromRenderProps HOC:

Type signature:

fromRenderProps(
  RenderPropsComponent: ReactClass | ReactFunctionalComponent,
  propsMapper: (props: Object) => Object,
  renderPropName?: string
): HigherOrderComponent

Example:

import { fromRenderProps } from 'recompose';
const { Consumer: ThemeConsumer } = React.createContext({ theme: 'dark' });
const { Consumer: I18NConsumer } = React.createContext({ i18n: 'en' });
const RenderPropsComponent = ({ render, value }) => render({ value: 1 });
 
const EnhancedApp = compose(
  // Context (Function as Child Components)
  fromRenderProps(ThemeConsumer, ({ theme }) => ({ theme })),
  fromRenderProps(I18NConsumer, ({ i18n }) => ({ locale: i18n })),
  // Render props
  fromRenderProps(RenderPropsComponent, ({ value }) => ({ value }), 'render'),
)(App);
 
// Same as
const EnhancedApp = () => (
  <ThemeConsumer>
    {({ theme }) => (
      <I18NConsumer>
        {({ i18n }) => (
          <RenderPropsComponent
            render={({ value }) => (
              <App theme={theme} locale={i18n} value={value} />
            )}
          />
        )}
      </I18NConsumer>
    )}
  </ThemeConsumer>
)

[wuct]

Haha, we almost comment at the same time.

I agree with you about the naming.

[wuct]

Except that IMO fromRenderProps is better :)

[istarkov]

to and from looks good

[istarkov]

also what the reason in render prop name? any real example please when just children will be not suitable

[evenchange4]

Personally, I only use children function for render props component.

[istarkov]

Seems good for me except name.

[evenchange4]

If this PR could be accepted, I can update those changes:

1. rename original withRenderProps to toRenderProps [BREAKING CHANGES]
2. add withConsumerProps fromRenderProps HOC without third parameter:

fromRenderProps(
  Component: ReactClass | ReactFunctionalComponent,
  propsMapper: (props: Object) => Object,
- renderPropName?: string
): HigherOrderComponent

What do you think?

cc @pomber

[istarkov]

renderPropName is ok.

original withRenderProps to (to)RenderProps
this PR fromRenderProps

[evenchange4]

ready for review :)

[istarkov]

Super! All is fine. LGTM.
@wuct ?

[xzyfer]

This is great 👌

[wuct]

Great work, thanks!

[wuct]

@istarkov so this one will land in 0.28.0, right?