container-query-toolkit
🔧 Basic utilities to work with container query.
Install
npm i -S container-query-toolkit
Usage
const kit = ;// or;// or;// or; const query = a: minWidth: 400 maxWidth: 500 minHeight: 400 maxHeight: 500 b: minWidth: 500 maxWidth: 600 minHeight: 400 maxHeight: 500 c: minWidth: 400 maxWidth: 500 minHeight: 500 maxHeight: 600 d: minWidth: 500 maxWidth: 600 minHeight: 500 maxHeight: 600; const result1 = width: 300 height: 300;; const result2 = width: 450 height: 450;; const result3 = width: 450 height: 550;; const result4 = width: 550 height: 450;; const result5 = width: 550 height: 550;; const result6 = width: 700 height: 700;; // {min|max}Height would be ignored if height is not provided.const result7 = width: 450;; // {min|max}Width would be ignored if width is not provided.const result8 = height: 450;;
API
matchQueries(rules)(contentSize)
-
rules: {[key: string]: {minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number}}
-
contentSize: {height?: number, width?: number}
If
contentSize
is missingheight
orwidth
,{min|max}Height
or{min|max}Width
rules will be ignored respectively.