UNPKG

use-container-queries

Version:

A react hook that tracks a containers size and the range that width falls into within a list of breakpoints. This allows better responsive styling, where the user can style DOM elements based on their container, rather than the browser viewport.

80 lines (79 loc) 1.92 kB
{ "version": "1.0.0", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", "files": [ "dist" ], "engines": { "node": ">=10" }, "scripts": { "start": "tsdx watch", "build": "tsdx build", "test": "tsdx test --passWithNoTests", "test:watch": "tsdx test --watch", "lint": "tsdx lint", "prepare": "tsdx build", "prepublishOnly": "npm run test && npm run lint", "preversion": "npm run lint" }, "husky": { "hooks": { "pre-commit": "lint-staged && npm run test" } }, "lint-staged": { "*.{js,ts,tsx}": [ "npm run lint", "prettier --write" ] }, "name": "use-container-queries", "author": "Josh Reynolds", "repository": { "type": "git", "url": "https://github.com/joshuaaron/use-container-queries.git" }, "homepage": "https://github.com/joshuaaron/use-container-queries", "module": "dist/use-container-queries.esm.js", "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" }, "devDependencies": { "@testing-library/jest-dom": "5.11.9", "@testing-library/react": "11.2.5", "@testing-library/react-hooks": "5.0.3", "@types/react": "17.0.0", "@types/react-dom": "17.0.0", "@typescript-eslint/eslint-plugin": "4.11.1", "@typescript-eslint/parser": "4.11.1", "eslint": "7.11.0", "eslint-config-tsdx": "0.2.0", "eslint-plugin-react-hooks": "4.2.0", "husky": "4.3.6", "lint-staged": "10.5.4", "prettier": "2.2.1", "react": "17.0.1", "react-dom": "17.0.1", "react-test-renderer": "17.0.1", "tsdx": "0.14.1", "tslib": "2.0.3", "typescript": "4.0.3" }, "keywords": [ "react", "reactjs", "react-hooks", "hooks", "hook", "resize-observer", "element-resize", "observe-element", "react-resize-observer", "container-query", "container-queries" ] }