🛠️ withPieceAsContainer

Sometimes you want to shape or align, your component outside I mean from a container, page, etc and iIt's usefull do it with a HOC: withPieceAsContainer

interface ButtonProps {
  children?: string;
}

const Button = (props: ButtonProps) => {
  return <button type='button'>{props.children}</button>;
};

const ButtonAsPiece = withPieceAsContainer(Button, {
  // Piece default properties:
  flex: '1 0 auto',
});

//Now i can apply properties of a piece into my custom button.

const Main = () => {
  return (
    <>
      <ButtonAsPiece
        width='200px'
        height='200px'
        radius='50%'
      />
      <ButtonAsPiece
        width='50'
        height='50px'
        radius='50%'
      />
    </>
  );
};