Render component from prop

[matthisk]

Is it possible to render a component that is passed as a prop using twin.macro? If I try the below example I run into a runtime error because Component is undefined. I think this has to do with the way twin.macro transforms this code into code usable by styled-components?

const BaseButton = ({ component: Component = 'button', children, ...props }) => (
  <Component tw="rounded-full" {...props}>{children}</Component>
);

Cheers!

[ben-rogerson]

Doesn't look like it's possible - styled-components is hoisting the component out of the BaseButton component making Component undefined.

Here's the compiled code:

var _StyledComponent = _styled(Component).withConfig({ // < Component is hoisted up here
  // sc props
})({
  "borderRadius": "9999px"
});

const BaseButton = ({
  component: Component = 'button',
  children,
  ...props
}) => React.createElement(_StyledComponent, props, children);

Emotion doesn't have the same behaviour:

const BaseButton = ({
  component: Component = 'button',
  children,
  ...props
}) => React.createElement(Component, _extends({
  css: {
    "borderRadius": "9999px"
  }
}, props), children);

Alternatives

If it's just the element type you'd like to change, you could use the as prop:

const BaseButton = ({ children, ...rest }) => (
  <button tw="rounded-full" {...rest}>
    {children}
  </button>
)

const MyButton = () => <BaseButton as="div">Close</BaseButton>

You could also use the sc element cloning feature if you want to change the styling between components:

const MyButton = tw(BaseButton)`block mt-10`
// or
const MyButton = styled(BaseButton)([tw`block mt-10`])

Hope that helps 👍