Skip to content

Instantly share code, notes, and snippets.

@artalar

artalar/props-lifting.jsx

Created December 1, 2018 13:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save artalar/ccf0eff817c40f22df08a54d0fba04eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save artalar/ccf0eff817c40f22df08a54d0fba04eb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
props-lifting.jsx
/*[1]*/import {TextField} from 'material-ui'
// TextField merge props for inner components (outer props and internal props)
<TextField
ownProps={ownProps}
inputProps={{ style: { color: 'black' } }}
placeholderProps={{ style: { color: 'gray' } }}
/>
// VS
/*[2]*/import {InputProvider, PlaceHolderProvider, TextField} from 'material-ui'
// Each component have consumer and merge context and props from TextField
<InputProvider style={{ color: 'black' }}>
<PlaceHolderProvider style={{ color: 'gray' }}>
<TextField ownProps={ownProps}/>
</PlaceHolderProvider>
</InputProvider>
// VS
/*[3]*/import {Input, PlaceHolder, TextField} from 'material-ui'
// Each component have consumer (for receive context from TextField) and merge context and props
<TextField
ownProps={ownProps}
input={() => <Input style={{ color: 'black' }} value={value} />}
placeholder={() => <PlaceHolder style={{ color: 'gray' }} />}
/>
// VS
/*[4]*/import {Input, PlaceHolder, TextField} from 'material-ui'
// "render-props" - programmer merge props for component
<TextField
ownProps={ownProps}
input={props => <Input {...props} style={{ ...props.color, color: 'black' }} />}
placeholder={props => <PlaceHolder {...props} style={{ ...props.color, color: 'gray' }} />}
/>
@artalar
Copy link
Author

artalar commented Dec 11, 2018 •
edited
Loading 

const List = ({ list }) => (
  <ul>
    {list.map(item => (
      <li>{item(dependencies)}</li>
    ))}
  </ul>
);

const View = ({ list }) => (
  <List
    list={list.map(data => dependencies => (
      <Item {...dependencies} {...data} />
    ))}
  />
);

// VS

const ListItem = ({ children }) => <li>{children}</li>;
const List = ({ children }) => (
  <ListProvider>
    <ul>{children}</ul>
  </ListProvider>
);

const View = ({ list }) => (
  <List>
    {list.map(data => (
      <ListConsumer>
        {dependencies => (
          <ListItem>
            <Item {...dependencies} {...data} />
          </ListItem>
        )}
      </ListConsumer>
    ))}
  </List>
);```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment