Skip to content

Instantly share code, notes, and snippets.

@Iamhere

Iamhere/props-lifting.jsx

Forked from artalar/props-lifting.jsx
Created January 11, 2019 14:40
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Iamhere/ad8ea8f0b801d0a4fe2e1cdfbf3e0098 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @artalar artalar created this gist Dec 1, 2018.
    37 changes: 37 additions & 0 deletions props-lifting.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    /*[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' }} />}
    />