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
JSON
{
"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"
]
}