feat: 🎸 improve and add build

.gitignore

@@ -0,0 +1,73 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# build output
+lib/
+
+.DS_Store
+
+src/parser.ts
+
+.cache/
+.puppet-master/
+
+storybook-static/

README.md

@@ -0,0 +1,20 @@
+# use-media
+
+`useMedia` React sensor hook that tracks state of a CSS media query.
+
+
+## Usage
+
+```jsx
+import {useMedia} from 'use-media';
+
+const Demo = () => {
+  const isWide = useMedia('(min-width: 1000px)');
+
+  return (
+    <div>
+      Screen is wide: {isWide ? '😃' : '😢'}
+    </div>
+  );
+};
+```

package.json

@@ -2,13 +2,14 @@
   "name": "use-media",
   "version": "0.1.0",
   "description": "useMedia React hook",
-  "main": "index.js",
+  "main": "lib/index.js",
   "files": [
-    "index.js"
+    "lib/"
   ],
-  "types": "index.d.ts",
-  "typings": "index.d.ts",
+  "types": "lib/index.d.ts",
+  "typings": "lib/index.d.ts",
   "scripts": {
+    "build": "tsc",
     "release": "semantic-release"
   },
   "author": "@streamich",
@@ -28,9 +29,11 @@
     "semantic-release": "^15.10.6",
     "@semantic-release/changelog": "^3.0.1",
     "@semantic-release/npm": "^5.0.5",
-    "@semantic-release/git": "^7.0.5"
+    "@semantic-release/git": "^7.0.5",
+    "typescript": "^3.1.3"
   },
   "peerDependencies": {
+    "react": "*"
   },
   "config": {
     "commitizen": {

src/index.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+const {useState, useEffect} = React as any;
+
+export const useMedia = (query: string, defaultState: boolean = false) => {
+  const [state, setState] = useState(defaultState);
+
+  useEffect(() => {
+    let mounted = true;
+    const mql = window.matchMedia(query);
+    const onChange = () => {
+      if (!mounted) return;
+      setState(!!mql.matches);
+    };
+
+    mql.addListener(onChange);
+    setState(mql.matches);
+
+    return () => {
+      mounted = false;
+      mql.removeListener(onChange);
+    };
+  }, [query]);
+
+  return state;
+};

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "pretty": true,
+    "rootDir": "src",
+    "sourceMap": false,
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "lib",
+    "lib": ["es2018", "dom"]
+  },
+  "exclude": [
+    "node_modules",
+    "lib",
+    "**/__tests__/**/*",
+    "**/__stories__/**/*",
+    "*.test.ts",
+    "*.test.tsx"
+  ]
+}