add css types to css prop

ParishConnect · Jul 8, 2019 · 71110c8 · 71110c8
1 parent cd11a84
commit 71110c8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/box.tsx b/src/box.tsx
@@ -1,22 +1,24 @@
 import { ClassNames } from "@emotion/core";
 import facepaint from "facepaint";
 import * as CSS from "csstype";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useContext } from "react";
 import expandAliases from "./expandAliases";
 import splitCSSProps from "./splitCSSProps";
+import { MediaQueryContext } from "./mqcontext";
 
 export interface BoxProps extends CSS.StandardPropertiesFallback<number | string | number[] | string[] | null> {
   is?: any;
   className?: string;
-  css?: any;
+  css?: CSS.StandardPropertiesFallback<number | string | number[] | string[] | null>;
   props?: React.InputHTMLAttributes<HTMLInputElement> & React.ClassAttributes<HTMLInputElement> | null | undefined;
   style?: object;
   children?: ReactNode | ReactNode[];
   [key: string]: any;
 }
 
 const Box = ({ is = "div", className, innerRef, css, props = {}, style, children, ...rest }: BoxProps) => {
-  const mq = facepaint(["@media(min-width: 420px)", "@media(min-width: 920px)", "@media(min-width: 1120px)"]);
+  const mqContext = useContext(MediaQueryContext);
+  const mq = facepaint(mqContext);
 
   [rest, css] = expandAliases(rest, css);
   const { matched, remaining } = splitCSSProps(rest);

diff --git a/src/mqcontext.ts b/src/mqcontext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const MediaQueryContext = createContext(["@media(max-width: 1280px)", "@media(max-width: 736px)", "@media(min-width: 480px)"]);
+
+export const { Provider: MediaQueryProvider, Consumer: MediaQueryConsumer } = MediaQueryContext;