React Media Hook: Dễ dàng Xử lý Media Queries trong React với React Hook

react-media-hook

React Hook cho Media Queries. Sử dụng API matchMedia.

Cài đặt

Cài đặt bằng yarn:

yarn add react-media-hook

Hoặc bằng npm:

npm i react-media-hook --save

Sử dụng

Chuyển truy vấn cho useMediaPredicate:

import React from "react";
import { useMediaPredicate } from "react-media-hook";

const Component = () => {
    const biggerThan400 = useMediaPredicate("(min-width: 400px)");

    return <div>
        {biggerThan400 && <button>SomeButton</button>}
    </div>
};

API

useMedia(query: string)

Trả về undefined (ví dụ, trong môi trường Node.js nơi mathMedia không được định nghĩa), hoặc đối tượng, tương tự kết quả của mathMedia(…):

{
    matches: boolean,
    media: string
}

useMediaPredicate(query: string)

Trả về true hoặc false.

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

.eslintignore

.cache/
dist/
node_modules/
flow-typed/
test/
types/
example/

.flowconfig

[ignore]

[include]

[libs]
./flow-typed

[lints]

[options]
module.file_ext=.js
module.file_ext=.jsx

[strict]

.gitignore

.DS_Store
npm-debug.log

.cache/
dist/
node_modules/
.idea/
.vscode/

.npmignore

*.log
npm-debug.log*

# Coverage directory used by tools like istanbul
coverage
.nyc_output

# Dependency directories
node_modules

# npm package lock
package-lock.json
yarn.lock

# project files
src
test
example
.travis.yml
.babelrc
.gitignore
dist
.cache

Chi tiết tải về:

Tác giả: ilyalesik
Nguồn: https://github.com/ilyalesik/react-media-hook

Giấy phép: MIT license