Some thoughts about reusable component design in react

Consider passing in some properties as children,  instead of props . This will make the code looks cleaner:

• The consumer doesn’t have to build a big “props” object to pass in
• You will divide a single component into several ones. Each one will a take small props object, which is highly inherent

For example, instead of

var columns = [{text: "xxx", className: "xxx"}, {text: "yyy", className: "yyy"} ... ]; 

<Row columnDataList = {columns}/> 

You’d rahter

<Row>
    <Column class="xxx">
           xxx
    </Column>

    <Column class="yyy">
           yyy
    </Column>

    ...
</Row>

---

Don’t assume one shape only exists in one breakpoint of screen and then e.g. design one for mobile and the other for desktop.  Requirements may change.  A collapsible menu used only in mobile now may be used in desktop in the future. 

Instead you should just build separate components, not based on the breakpoints, but based on their shapes