Base Component

Using a Base Component

There is tremendous amount of flexibility when it comes to composition in React – since components are essentially just functions.
By changing style details in a component to props we can make it more reusable.

The color and backgroundColor properties have been moved up to the component’s props.
Additionally, we’ve added a big prop to adjust the padding top and bottom.

  1. const Button = ({
  2.   big,
  3.   color = colors.white,
  4.   backgroundColor = colors.blue,
  5.   ...props
  6.   }) => {
  7.   const sx = {
  8.     fontFamily: 'inherit',
  9.     fontSize: 'inherit',
  10.     fontWeight: bold,
  11.     textDecoration: 'none',
  12.     display: 'inline-block',
  13.     margin: 0,
  14.     paddingTop: big ? space[2] : space[1],
  15.     paddingBottom: big ? space[2] : space[1],
  16.     paddingLeft: space[2],
  17.     paddingRight: space[2],
  18.     border: 0,
  19.     color,
  20.     backgroundColor,
  21.     WebkitAppearance: 'none',
  22.     MozAppearance: 'none'
  23.   };
  25.   return (
  26.     <button {...props} style={sx}/>
  27.   )
  28. };

Usage

  1. const Button = () => (
  2.   <div>
  3.     <Button>
  4.       Blue Button
  5.     </Button>
  6.     <Button big backgroundColor={colors.red}>
  7.       Big Red Button
  8.     </Button>
  9.   </div>
  10. );
  12. // By adjusting the props API of the base Button component,
  13. // an entire set of button styles can be created.
  14. const ButtonBig = (props) => <Button {...props} big/>;
  15. const ButtonGreen = (props) => <Button {...props} backgroundColor={colors.green}/>;
  16. const ButtonRed = (props) => <Button {...props} backgroundColor={colors.red}/>;
  17. const ButtonOutline = (props) => <Button {...props} outline/>;