Btukfyl

Often I use styled-components that always have the same content, e.g. "•", or "|".

I wonder if something like this is possible:

const Divider = styled.div.attrs({

  text: '|',

})({

  margin: '0 5px',

})

<Divider />

Instead of writing and calling it like this:

const Divider = styled.div({

  margin: '0 5px',

})

<Divider>|</Divider>

PS. I know that text is not a valid HTML attribute

One approach would be to pass a type and run it through a switch. It'll be more declarative as to what kind of Divider a developer can expect to see rendered.

Working example: https://codesandbox.io/s/5y1n9mv08x

components/Divider.js (this can be done in-line within the StyledDivider component file, but for clarity, I separated it into its own file)

import React from "react";

import PropTypes from "prop-types";



const typeReducer = type => {

  switch (type) {

    case "backslash":

      return "\";

    case "dash":

      return "-";

    case "dot":

      return "•";

    case "pipe":

      return "|";

    case "forwardslash":

      return "/";

    default:

      return <hr />;

  }

};



const Divider = ({ className, type }) => (

  <div className={className}>

    {typeReducer(type)}

  </div>

);



export default Divider;



Divider.propTypes = {

  className: PropTypes.string.isRequired,

  type: PropTypes.string

};

component/StyledDivider.js

import styled from "styled-components";

import Divider from "./Divider";



export default styled(Divider)`

  display: inline;

  color: #03a9f3;

  font-weight: bold;

  font-size: 20px;

  margin: 0 5px;

`;

components/Header.js

import React from "react";

import Link from "./StyledLink";

import Divider from "./StyledDivider";



export default () => (

  <nav className="container">

    <Link primary link="/">

      Home

    </Link>

    <Divider type="dot" />

    <Link danger link="/about">

      About

    </Link>

    <Divider type="pipe" />

    <Link link="/portfolio">Portfolio</Link>

    <Divider type="pipe" />

    <Link danger link="/legal">

      Legal

    </Link>

    <Divider type="dot" />

    <Link primary link="/contact">

      Contact

    </Link>

    <Divider />

  </nav>

);