Salut, cet article est une continuation de
ce post , où j'ai décidé de commencer une série de petits tutoriels sur la création d'un UI-Kit. Il décrit comment utiliser le contexte pour créer un thème d'application. Aujourd'hui, je veux compléter l'application avec un autre contexte qui nous aidera à montrer les composants de l'interface utilisateur, en fonction de l'appareil de l'utilisateur.
Dans cet exemple, j'utiliserai également le module
create-react-context .
L'arborescence des tâches sera identique à la précédente. Nommons le nouveau dossier de
contexte multimédia .
media-context/ MediaConsumer/ MediaConsumer.js index.js MediaProvider/ MediaProvider.js index.js constants.js context.js index.js
Nous traiterons rapidement des
index .
media-context / index.js export { MediaProvider } from './MediaProvider'; export { MediaConsumer } from './MediaConsumer';
context-theme / MediaConsumer / index.js export { MediaConsumer } from './MediaConsumer';
context-theme / MediaProvider / index.js export { MediaProvider } from './MediaProvider';
theme-context / context.jsComme précédemment, créez
createContext (
module npm ).
import createContext from 'create-react-context'; const { Provider, Consumer } = createContext(); export { Provider, Consumer };
Nous importons, détruisons et exportons les composants résultants.
media-context / constants.jsEnregistrez les variables ici.
export const devices = ["mobile", "tablet", "desktop", "native"]; export const defaultDevice = "mobile";
Dans une approche adaptative, l'utilisateur utilise principalement 4 types d'appareils - bureau, tablette, application mobile et native (native). Autres appareils possibles: smart TV, horloge, etc. Dans cet exemple, nous n'utiliserons que les
mobiles et les ordinateurs de bureau .
context-theme / MediaProvider / MediaProvider.jsComme nous le savons déjà, Provider est disponible dans
React.Context , qui «alimente» les consommateurs en contexte. Il leur permet d'écouter et de réagir à des contextes changeants.
accessoires du
sont accessibles en fonction de l'
device . Permettez-moi de vous rappeler que toutes les valeurs transmises au fournisseur de
value seront disponibles pour les consommateurs.
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 };
context-theme / MediaConsumer / MediaConsumer.jsUne description de la fonctionnalité du consommateur peut être trouvée dans l'article précédent, mais en bref, le
Consumer répond au contexte et renvoie un nouveau composant.
Dans ce cas, nous transmettons deux paramètres aux
children : le type d'appareil et si l'appareil est tactile.
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 };
Maintenant, un nouveau contexte est disponible dans notre application, utilisons-le.
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);
Pour utiliser le concours multimédia, nous avons besoin d'un détecteur de médias (pour obtenir des informations sur l'appareil de l'utilisateur). Il n'y a pas de détecteur de média dans notre application, alors prenons-le d'ici -
react-device- detect , à savoir le drapeau
isMobile .
Comme pour le thème contextuel, nous emballerons notre composant de test dans un fournisseur de médias. La valeur des accessoires que le fournisseur transmet à son compte fera l'envie de l'appareil du client. Je suis entré depuis un mobile, nous envoyons une version mobile du site, depuis un ordinateur - bureau.
Le code de travail peut être trouvé ici .
Pour voir la différence, suivez le lien depuis un navigateur de bureau et mobile.
C’est tout! Maintenant, notre application a deux contextes qui nous aideront à créer des composants plus polyvalents et flexibles dans notre UI-Kit. Dans le prochain article, je vais essayer de créer un composant complexe en utilisant les deux contextes. J'espère que cet article vous sera utile.
Je vous remercie