CODEWITHSUNDEEP
reactjsstyled-components
Fellow Stranger
Fellow Stranger

Reputation: 34063

Declare styled-component with self contained text

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

Upvotes: 0

Views: 204

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19772

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>
);

Upvotes: 1

Related Questions