How to write a wrapper around a material UI component using React JS?

Question

I am using Material UI next library and currently I am using List component. Since the library is in beta, lot of its parameter names get changed. To solve this I am planning to write a wrapper around the required components so that things wont break. My list component :

<List dense>
   <List className={classes.myListStyles}>
      <ListItem disableGutters/>
   </List>
</List>

How should I write the wrapper for the List(say myListWrapper) and ListItem so that the wrapper component can handle props and pass them to the actual MUI list component inside?

Answer 1

I had worked on MUI wrappers, writing my own library for a project. The implementation we are focusing, is to pass the props to inner/actual-MUI component from the our wrapper component. with manipulation. In case of wrapping props for abstraction.

Following is my approach to the solution:

import { List as MaterialList } from 'material-ui/List';
import { React } from 'react';
import { ListItem as MaterialListI } from 'material-ui/ListItem';

class List extends MaterialList {

    constructor(props){
        const propsToPass = {
            prop1 : change(props.prop1),
            ...props
        }
        super(propsToPass);
    }
};

class ListItem extends MaterialListItem {

    const propsToPass = {
            prop1 : change(props.prop1),
            prop2 : change(props.prop2),
            ...props
        }
        super(propsToPass);
    }
};


class App extends React.Component {
    render () {
        return (
            <List prop='value' >
                <ListItem prop1={somevalue1} prop2={somevalue2} />
                <ListItem prop1={somevalue1} prop2={somevalue2} />
                <ListItem prop1={somevalue1} prop2={somevalue2} />
            </List>
        )
    }
};

Above code will allow following things to do with your component:

• You can use the props with exact names, as used in Material UI.
• You can manipulate/change/transform/reshape you props passed from outside.
• If props to you wrapper components are passed with exactly same names as MUI is using, they will directly be sent to the inner component. (... operator.)
• You can use Component with exact same name as material is using to avoid confusion.
• Code is written according to advance JSX and JavaScript ES6 standards.
• You have a space to manipulate your props to pass into the MUI Components.
• You can also implement type checking using proptypes.

You can ask for any confusion/query.

Answer 2

You can write it like this:

const MyList = props => (
    <List 
        {/*mention props values here*/}
        propA={props.A}
        propB={props.B}
    >
        {props.children}
    </List>
)

const MyListItem = props => (
    <ListItem 
        {/*mention props values here*/}
        propA={props.A}
        propB={props.B}
    >
        {props.children}
    </ListItem>
)

Now you need to use MyList and MyListItem, decide the prop names for these component (as per your convenient), and inside these component map those values to actual Material-UI component properties.

Note:

If you are using the same prop names (same name as material-ui component expect) for your component then you can write like this also:

const MyList = ({children, ...rest}) => <div {...rest}>{children}</div>

const MyListItem = ({children, ...rest}) => <p {...rest}>{children}</p>

---

Check this example:

const A = props => <div>{props.children}</div>

const B = props => <p>{props.children}</p>

ReactDOM.render(
  <A>
    <A>
      <B>Hello</B>
    </A>
  </A>,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />