Merge pull request #114 from artsy/fix-custom-classnames

[Feature] Allow classNames to be passed to <Media> container

README.md

@@ -348,6 +348,8 @@ const ExampleAppMedia = createMedia({
   interactions: {
     hover: "(hover: hover)",
     notHover: "(hover: none)",
+    landscape: "(orientation: landscape)",
+    portrait: "(orientation: portrait)",
   },
 })
 
@@ -395,6 +397,28 @@ export const HomePage = () => {
 The examples given for each prop use breakpoint definitions as defined in the
 above ‘Setup’ section.
 
+If you would like to avoid the underlying div that is generated by `<Media>` and
+instead use your own element, use the render-props form:
+
+```tsx
+export const HomePage = () => {
+  return (
+    <>
+      <Media at="sm">Hello mobile!</Media>
+      <Media greaterThan="xs">
+        {(mediaClassNames) => {
+          return (
+            <MySpecialComponent className={mediaClassNames}>
+              Hello desktop!
+            </MySpecialComponent>
+          )
+        }}
+      </Media>
+    </>
+  )
+}
+```
+
 #### createMediaStyle
 
 > Note: This is only used when SSR rendering

src/Media.tsx

@@ -11,10 +11,10 @@ import { intersection, propKey, createClassName } from "./Utils"
  *
  * @see {@link MediaProps.children}.
  */
-export type RenderProp = ((
+export type RenderProp = (
   className: string,
   renderChildren: boolean
-) => React.ReactNode)
+) => React.ReactNode
 
 // TODO: All of these props should be mutually exclusive. Using a union should
 //       probably be made possible by https://github.com/Microsoft/TypeScript/pull/27408.
@@ -176,6 +176,11 @@ export interface MediaProps<B, I> extends MediaBreakpointProps<B> {
    *
    */
   children: React.ReactNode | RenderProp
+
+  /**
+   * Additional classNames to passed down and applied to Media container
+   */
+  className?: string
 }
 
 export interface MediaContextProviderProps<M> {
@@ -363,13 +368,22 @@ export function createMedia<
       validateProps(props)
     }
 
+    static defaultProps = {
+      className: "",
+    }
+
     render() {
       const props = this.props
       return (
         <MediaContext.Consumer>
           {({ onlyMatch } = {}) => {
             let className: string | null
-            const { children, interaction, ...breakpointProps } = props
+            const {
+              children,
+              className: passedClassName,
+              interaction,
+              ...breakpointProps
+            } = props
             if (props.interaction) {
               className = createClassName("interaction", props.interaction)
             } else {
@@ -419,7 +433,7 @@ export function createMedia<
             } else {
               return (
                 <div
-                  className={`fresnel-container ${className}`}
+                  className={`fresnel-container ${className} ${passedClassName}`}
                   suppressHydrationWarning={!renderChildren}
                 >
                   {renderChildren ? props.children : null}

src/__test__/Media.test.tsx

@@ -134,6 +134,17 @@ describe("Media", () => {
       expect(query).toHaveStyleRule("margin", "0")
       expect(query).toHaveStyleRule("padding", "0")
     })
+
+    it("applies additional classNames passed as props", () => {
+      const query = renderer
+        .create(
+          <Media lessThan="small" className="foo">
+            ohai
+          </Media>
+        )
+        .toJSON()
+      expect(query.props.className).toContain("foo")
+    })
   })
 
   describe("concerning breakpoints", () => {