Custom box area

BoxArea.js

/**
 * Javascript File 
 * @author: Aderbal Nunes <aderbalnunes@gmail.com>
 * @since: 12/05/2020
 * 
 * 
 * props: {
 *  border: 2,
 *  borderColor: '#990099',
 *  borderStyle: 'solid',
 *  backgroundColor: '#FFF',
 *  borderRadius: 3,
 *  padding: 8,
 *  margin: 2,
 *  child: {
 *    component: <Component>,
 *    props: {
 *      ...
 *    }
 *   }
 * }
 * 
 */

import React, { Component } from 'react';

class BoxArea extends Component{

  render(){
    const {child, ...styles} = this.props;
    return (
      <div style={styles}>
        {child
          ? React.createElement(child.component, child.props)
          : null
        }
      </div>
    );
  };
}

export default BoxArea;