feat: allow custom tag

kirkov · Jan 20, 2018 · 4a1f367 · 4a1f367
1 parent b950f2e
commit 4a1f367
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/__snapshots__/breakbox.test.js.snap b/src/__snapshots__/breakbox.test.js.snap
@@ -56,6 +56,20 @@ exports[`can provide custom spaces: uses custom spaces 1`] = `
 </div>
 `;
 
+exports[`can specify element tag: container can render an article tag 1`] = `
+<article
+  className=" x0"
+>
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".x0{background:red}",
+      }
+    }
+  />
+</article>
+`;
+
 exports[`handle single values: null value 1`] = `
 <div
   className=" "

diff --git a/src/breakbox.js b/src/breakbox.js
@@ -58,8 +58,8 @@ const getStyles = (props, config) => {
   return styles
 }
 
-export const breakbox = (containerStyles = {}, component = 'div') => {
-  const BreakboxComponent = ({className, children, ...otherProps}, context) => {
+export const breakbox = (containerStyles = {}) => {
+  const BreakboxComponent = ({className, children, tag = 'div', ...otherProps}, context) => {
     const config = Object.assign({}, defaultConfig, context.breakbox)
     const styles = getStyles(Object.assign(otherProps, containerStyles), config)
     const stylesClassName = cxs(styles)
@@ -71,7 +71,7 @@ export const breakbox = (containerStyles = {}, component = 'div') => {
     }
 
     return React.createElement(
-      component,
+      tag,
       {
         className: [className, stylesClassName].join(' ')
       },

diff --git a/src/breakbox.test.js b/src/breakbox.test.js
@@ -13,6 +13,12 @@ beforeEach(() => {
   resetStyles()
 })
 
+it('can specify element tag', () => {
+  matchSnapshot('container can render an article tag',
+    <Container tag='article' background='red' />
+  )
+})
+
 it('skips breakpoints', () => {
   matchSnapshot('skips middle value',
     <Container flexDirection={['row', null, 'column']} />