Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

🔧 Basic utilities to work with container query.

License

NotificationsYou must be signed in to change notification settings

react-container-query/container-query-toolkit

Repository files navigation

🔧 Basic utilities to work with container query.

Install

npm i -S container-query-toolkit

Usage

constkit=require('container-query-toolkit');// orimport*askitfrom'container-query-toolkit';// orimport{matchQueries}from'container-query-toolkit';// orimportmatchQueriesfrom'container-query-toolkit/lib/matchQueries';constquery={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},};constresult1=matchQueries(query)({width:300,height:300});expect(result1).toEqual({a:false,b:false,c:false,d:false});constresult2=matchQueries(query)({width:450,height:450});expect(result2).toEqual({a:true,b:false,c:false,d:false});constresult3=matchQueries(query)({width:450,height:550});expect(result3).toEqual({a:false,b:false,c:true,d:false});constresult4=matchQueries(query)({width:550,height:450});expect(result4).toEqual({a:false,b:true,c:false,d:false});constresult5=matchQueries(query)({width:550,height:550});expect(result5).toEqual({a:false,b:false,c:false,d:true});constresult6=matchQueries(query)({width:700,height:700});expect(result6).toEqual({a:false,b:false,c:false,d:false});// {min|max}Height would be ignored if height is not provided.constresult7=matchQueries(query)({width:450});expect(result7).toEqual({a:true,b:false,c:true,d:false});// {min|max}Width would be ignored if width is not provided.constresult8=matchQueries(query)({height:450});expect(result8).toEqual({a:true,b:true,c:false,d:false});

API

matchQueries(rules)(contentSize)

  • rules: {[key: string]: {minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number}}

  • contentSize: {height?: number, width?: number}

    IfcontentSize is missingheight orwidth,{min|max}Height or{min|max}Width rules will be ignored respectively.

About

🔧 Basic utilities to work with container query.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp