feat: add inline composition

Author: pedronauck

README.md

@@ -16,6 +16,7 @@
   - [Custom render and retrieving props from composed](#custom-render-and-retrieving-props-from-composed)
   - [Leading with multiple params](#leading-with-multiple-params)
   - [Typescript support](#typescript-support)
+  - [Inline composition](#inline-composition)
 
 ## 🧐   Why
 
@@ -194,6 +195,25 @@ const Composed = adopt<RenderProps, Props>({
 </Composed>
 ```
 
+### Inline composition
+
+If you dont care about [typings](#typescript-support) and need something more easy and quick, you can choose to use a inline composition by importing `<Adopt>` component and passing your mapper as prop:
+
+```js
+import React from 'react'
+import { Adopt } from 'react-adopt'
+import { Value } from 'react-powerplug'
+
+const mapper = {
+  greet: <Value initial="Hi" />,
+  name: <Value initial="John" />
+}
+
+<Adopt mapper={mapper}>
+  {({ greet, name }) => /* ... */}
+</Adopt>
+```
+
 ## 🕺 &nbsp; Contribute
 
 1.  [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device

src/index.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { shallow, mount } from 'enzyme'
 import { Value } from 'react-powerplug'
 
-import { adopt } from './'
+import { adopt, Adopt } from './'
 
 test('return one component with children props as function', () => {
   interface RenderProps {
@@ -130,3 +130,39 @@ test('throw with a wrong value on mapper', () => {
     'The render props object mapper just accept valid elements as value'
   )
 })
+
+test('inline composition using <Adopt> component', () => {
+  const Foo = ({ children }) => children('foo')
+  const children = jest.fn(({ foo }) => <div>{foo}</div>)
+
+  const mapper = {
+    foo: <Foo />,
+  }
+
+  const element = <Adopt mapper={mapper}>{children}</Adopt>
+
+  mount(element)
+  expect(children).toHaveBeenCalledWith({ foo: 'foo' })
+
+  const result = shallow(element)
+
+  expect(result.children().length).toBe(1)
+  expect(result.html()).toBe('<div>foo</div>')
+})
+
+test('changing <Adopt> properties on the fly', () => {
+  const Foo = ({ children, value }) => children(value)
+  const children = jest.fn(({ foo }) => <div>{foo}</div>)
+
+  const Component = ({ value }) => (
+    <Adopt mapper={{ foo: <Foo value={value} /> }}>
+      {({ foo }) => <div>{foo}</div>}
+    </Adopt>
+  )
+
+  const wrapper = mount(<Component value="foo" />)
+
+  expect(wrapper.text()).toBe('foo')
+  wrapper.setProps({ value: 'bar' })
+  expect(wrapper.text()).toBe('bar')
+})

src/index.tsx

@@ -81,3 +81,15 @@ export function adopt<RP = any, P = any>(mapper: Mapper<RP, P>): RPC<RP, P> {
 
   return keys(mapper).reduce(reducer, Children)
 }
+
+export type AdoptProps<RP, P> = P & {
+  mapper: Mapper<RP, P>
+  children: ChildrenFn<RP>
+}
+
+export const Adopt: React.SFC<AdoptProps<any, any>> = props => {
+  const Composed = adopt(props.mapper)
+  const composedProps = omit(['children', 'mapper'], props)
+
+  return <Composed {...composedProps}>{props.children}</Composed>
+}