Menggunakan Context API in React untuk membuat desain aplikasi yang responsif

Hai, artikel ini merupakan kelanjutan dari posting ini , di mana saya memutuskan untuk memulai serangkaian tutorial kecil tentang membuat UI-Kit. Ini menjelaskan cara menggunakan konteks untuk membuat tema aplikasi. Hari ini saya ingin melengkapi aplikasi dengan konteks lain yang akan membantu kami menunjukkan komponen UI, berdasarkan perangkat pengguna.



Dalam contoh ini, saya juga akan menggunakan modul create-react-context .

Pohon tugas akan identik dengan yang sebelumnya. Mari beri nama folder konteks media baru.

 media-context/ MediaConsumer/ MediaConsumer.js index.js MediaProvider/ MediaProvider.js index.js constants.js context.js index.js 

Kami akan dengan cepat menangani indeks .

media-context / index.js

 export { MediaProvider } from './MediaProvider'; export { MediaConsumer } from './MediaConsumer'; 

theme-context / MediaConsumer / index.js

 export { MediaConsumer } from './MediaConsumer'; 

theme-context / MediaProvider / index.js

 export { MediaProvider } from './MediaProvider'; 

theme-context / context.js
Seperti sebelumnya, buat createContext ( modul npm ).

 import createContext from 'create-react-context'; const { Provider, Consumer } = createContext(); export { Provider, Consumer }; 

Kami mengimpor, merusak, dan mengekspor komponen yang dihasilkan.

media-context / constants.js
Simpan variabel di sini.

 export const devices = ["mobile", "tablet", "desktop", "native"]; export const defaultDevice = "mobile"; 

Dalam pendekatan adaptif, pengguna terutama menggunakan 4 jenis perangkat - desktop, tablet, aplikasi seluler dan asli (asli). Perangkat lain yang memungkinkan: smart TV, jam, dll. Dalam contoh ini, kami hanya akan menggunakan ponsel & desktop .

theme-context / MediaProvider / MediaProvider.js
Seperti yang sudah kita ketahui, Penyedia tersedia di React.Context , yang “memberi makan” konsumen dengan konteks. Ini memungkinkan mereka untuk mendengarkan dan menanggapi konteks yang berubah.

Props adalah device dan dapat touchable . Biarkan saya mengingatkan Anda bahwa semua nilai yang diteruskan ke penyedia value akan tersedia bagi konsumen.

 import React from "react"; import PropTypes from "prop-types"; import { Provider } from "../context"; import { devices, defaultDevice } from "../constanst"; function MediaProvider(props) { const device = devices.includes(props.device) ? props.device : props.defaultDevice; return <Provider value={{ ...props, device }}>{props.children}</Provider>; } MediaProvider.propTypes = { device: PropTypes.oneOf(devices), touchable: false, children: PropTypes.node }; MediaProvider.defaultProps = { device: defaultDevice, touchable: false }; export { MediaProvider }; 

theme-context / MediaConsumer / MediaConsumer.js

Deskripsi fungsionalitas konsumen dapat ditemukan di artikel sebelumnya, tetapi singkatnya, Consumer merespons konteks dan mengembalikan komponen baru.

Dalam hal ini, kami memberikan dua parameter kepada children - children : jenis perangkat dan apakah perangkat itu peka terhadap sentuhan.

 import React from "react"; import PropTypes from "prop-types"; import { defaultTo } from "lodash"; import { devices, defaultDevice } from "../constanst"; import { Consumer } from '../context'; function MediaConsumer(props) { return ( <Consumer> {media => props.children({ touchable: defaultTo(media.touchable, props.defaultTouchable), device: defaultTo(media.device, props.defaultDevice), })} </Consumer> ) } MediaConsumer.propTypes = { defaultTouchable: PropTypes.bool, defaultDevice: PropTypes.oneOf(devices), children: PropTypes.func.isRequired }; MediaConsumer.defaultProps = { defaultDevice, defaultTouchable: false }; export { MediaConsumer }; 

Sekarang konteks baru tersedia di aplikasi kita, mari kita gunakan.

 import React from "react"; import ReactDOM from "react-dom"; import { isMobile } from "react-device-detect"; import cx from "classnames"; import { ThemeConsumer, ThemeProvider } from "./theme-context"; import { MediaConsumer, MediaProvider } from "./media-context"; import "./styles.css"; function renderSVG({ device, touchable }) { if (device === "mobile" && touchable) { return "https://image.flaticon.com/icons/svg/124/124114.svg"; } if (device === "tablet" && touchable) { return "https://image.flaticon.com/icons/svg/124/124099.svg"; } if (device === "desktop") { return "https://image.flaticon.com/icons/svg/124/124092.svg"; } } function MyComponent() { const renderMyComponent = (theme, media) => { const myComponentClassName = cx("my-class", { "my-class-dark": theme === "dark", "my-class-light": theme === "light" }); return ( <div className="wrapperDiv"> <object className={myComponentClassName} data={renderSVG(media)} type="image/svg+xml" /> </div> ); }; return ( <MediaConsumer> {media => ( <ThemeConsumer> {theme => renderMyComponent(theme, media)} </ThemeConsumer> )} </MediaConsumer> ); } function App() { return ( <MediaProvider device={isMobile ? "mobile" : "desktop"} touchable={isMobile} > <ThemeProvider theme="light"> <MyComponent /> </ThemeProvider> </MediaProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Untuk menggunakan kontes media, kami membutuhkan pendeteksi media (untuk mendapatkan informasi tentang perangkat pengguna). Tidak ada pendeteksi media dalam aplikasi kita, jadi mari kita ambil dari sini - react-device-detect , yaitu flag isMobile .

Seperti dengan tema kontekstual, kami akan membungkus komponen pengujian kami dalam penyedia media. Nilai alat peraga yang diteruskan penyedia ke akunnya akan membuat iri perangkat klien. Saya masuk dari ponsel, kami mengirim versi mobile situs, dari komputer - desktop. Kode kerja dapat ditemukan di sini .

Untuk melihat perbedaannya, ikuti tautan dari desktop dan peramban seluler.

Itu saja! Sekarang aplikasi kita memiliki dua konteks yang akan membantu kita membuat komponen yang lebih fleksibel dan fleksibel dalam UI-Kit kita. Pada posting selanjutnya saya akan mencoba membuat komponen yang kompleks menggunakan kedua konteks. Saya harap artikel ini bermanfaat.

Terima kasih