Skip to content

Instantly share code, notes, and snippets.

@jbmoelker
Created July 8, 2019 18:49
Show Gist options
  • Save jbmoelker/16f4513f3b0ebf7571a18faf8e05f960 to your computer and use it in GitHub Desktop.
Save jbmoelker/16f4513f3b0ebf7571a18faf8e05f960 to your computer and use it in GitHub Desktop.
Component Block pattern in React
import React from 'react';
import Section from './section';
export default App = () => (
<Section>
<Section.Header>
<Section.Title> My Section </Section.Title>
</Section.Header>
<Section.Body>
Any content here
</Section.Body>
</Section>
)
import React from 'react';
import PropTypes from 'prop-types';
import './section.css';
const Section = ({ children }) => (
<section className="section">
{ children }
</section>
);
Section.propTypes = {
children: PropTypes.node,
};
export const Header = ({ children }) => (
<header className="section__header">
{ children }
</header>
);
Header.propTypes = {
children: PropTypes.node,
};
Section.Header = Header;
export const Body = ({ children }) => (
<div className="section__body">
<div className="section__body-inner">
{ children }
</div>
</div>
);
Body.propTypes = {
children: PropTypes.node,
};
Section.Body = Body;
export const Title = ({ children, level = 4 }) => {
const Heading = `h${level}`;
return <Heading className="section__title">{children}</Heading>;
};
Title.propTypes = {
children: PropTypes.node,
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
};
Section.Title = Title;
export default Section;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment