This repository was archived by the owner on Dec 20, 2023. It is now read-only.

Farfetch/react-context-responsivePublic archive

NotificationsYou must be signed in to change notification settings
Fork12
Star28

A package that provides a responsive context to your application, using React Context API.

License

MIT license

28 stars 12 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 48 Commits
.github		.github
docs		docs
src		src
tests		tests
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.releaserc		.releaserc
LICENSE		LICENSE
README.md		README.md
babel.config.json		babel.config.json
commitlint.config.js		commitlint.config.js
index.d.ts		index.d.ts
jest.config.js		jest.config.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

react-context-responsive

This project is no longer being actively maintained.FARFETCH has decided to archive this project, as widely adopted alternatives, likereact-responsive, have become available.
We won't be accepting pull requests or responding to issues for this project anymore. Thank you for your understanding.

A package that provides a responsive context to your application, using React Context API.

It has the same API ofredux-responsive and they are easily interchangeable.

Installation

$ yarn add @farfetch/react-context-responsive$ npm i @farfetch/react-context-responsive

...and include it in your project

import{ResponsiveProvider,useResponsive}from'@farfetch/react-context-responsive';

Guidelines

Provider use

The app, ideally, should have only one<ResponsiveProvider>, usually atapp.js, wrapping all the components.

You can have as much consumers (useResponsive,useIsMobile,Responsive,withResponsive andwithIsMobile) as you need. When the Provider value changes, all the consumers will update.

Preferred consumers

The hooks (useResponsive anduseIsMobile) are the preferred method of using the context, when possible.

Mobile device detection

When possible, use thewithIsMobile anduseIsMobile for mobile devices detection. In the future we might use it to automatically splitting of mobile-only code.

ResponsiveProvider Props

Prop	Type	Required	Default	Description
initialMediaType	'_initial' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	no	'xs'	Initial media type before the calculation of the real measures
defaultOrientation	'landscape' \| 'portrait'	no	null	Initial orientation before the calculation of the real measures
children	node	yes	-	React component
breakpoints	{ xs: string, sm: string, md: string, lg: string, xl: string }	no	-	Min breakpoints
breakpointsMax	{ xs: string, sm: string, md: string, lg: string, xl: string }	no	-	Max breakpoints
mediaQueries	{ _initial: string, xs: string, sm: string, md: string, lg: string, xl: string }	no	-	Represents the screen media queries`(If this is passed, breakpoints and breakpointsMax props are obsolete)`
mobileBreakpoint	'_initial' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	no	-	It's considered mobile until this breakpoint

Object returned by the useResponsive / withResponsive / Responsive:

Key	Type	Description
mediaType	'_initial' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	Current breakpoint name
orientation	string	Current browser orientation
isCalculated	boolean	False on first render. Once true, it means all breakpoints values are based on the window.
is	{ _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }	Object key breakpoint name and value boolean that shows if width is at a certain breakpoint
lessThan	{ _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }	Object key breakpoint name and value boolean that shows if width is less than a certain breakpoint
greaterThan	{ _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }	Object key breakpoint name and value boolean that shows if width is greater than a certain breakpoint

Object returned by the useIsMobile / withIsMobile:

Key	Type	Description
isMobile	boolean	If it's below the mobile breakpoint defined by mobileBreakpoint
isCalculated	boolean	False on first render. Once true, it means all breakpoints values are based on the window.

Usage and examples

To use the package, you must embrace your code with theResponsiveProvider, following the guidelines.

The component has five different exported consumption APIs:

useResponsive: A hook which returns the responsive object
useIsMobile: A hook which returns an object withisMobile andisCalculated
Responsive: A render prop component
withResponsive: A HoC which passes the responsive data to theresponsive prop
withIsMobile: A HoC which passesisMobile andisCalculated props only

How to setup

There are two possible options to configure your responsive provider withbreakpoints or withmediaQueries

Usingbreakpoints andbreakpointsMax

constbreakpoints={xs:"320px",sm:"576px",md:"960px",lg:"1280px",xl:"1800px"};constbreakpointsMax={xs:"319px",sm:"575px",md:"959px",lg:"1279px",xl:"1799px"};constApp=()=>{return(<ResponsiveProviderbreakpoints={breakpoints}breakpointsMax={breakpointsMax}><Content/></ResponsiveProvider>);};exportdefaultApp;

UsingmediaQueries

constmediaQueries={_initial:"(min-width: 0px) and (max-width: 319px)",xs:"(min-width: 320px) and (max-width: 575px)",sm:"(min-width: 576px) and (max-width: 959px)",md:"(min-width: 960px) and (max-width: 1279px)",lg:"(min-width: 1280px) and (max-width: 1799px)",xl:"(min-width: 1800px)"};constApp=()=>{return(<ResponsiveProvidermediaQueries={mediaQueries}><Content/></ResponsiveProvider>);};exportdefaultApp;

How to consume the package

Rendering components with`useResponsive` hook. (Preferred method)

constGreetings=()=>{const{ lessThan}=useResponsive();if(lessThan.sm){return(<p>Hello small screen!</p>);}return(<p>Hello medium/big screen!</p>);};exportdefaultGreetings;

Rendering components with`useIsMobile` hook. (Preferred method)

constGreetings=()=>{const{ isMobile}=useIsMobile();if(isMobile){return(<p>Hello mobile!</p>);}return(<p>Hello desktop!</p>);};exportdefaultGreetings;

Rendering components with`Responsive` render prop component

classGreetingsextendsComponent{render(){return(<ResponsiveProvider><Content><Responsive>{(responsive)=>(<Component1currentBreakpoint={responsive.mediaType}/>)}</Responsive><Responsive>{(responsive)=>(<Component2orientation={responsive.orientation}/>)}</Responsive></Content></ResponsiveProvider>)}}exportdefaultGreetings;

Rendering components with`withResponsive` High-Order component

classGreetingsextendsComponent{render(){returnthis.props.responsive.lessThan.sm ?<p>Hello small screen!</p> :<p>Hello big/small screen!</p>}}exportdefaultwithResponsive(Greetings);

Rendering components with`withIsMobile` High-Order component

classGreetingsextendsComponent{render(){returnthis.props.isMobile ?<p>Hello mobile!</p> :<p>Hello desktop!</p>}}exportdefaultwithIsMobile(Greetings);

Additional notes

The`_initial` media type

The gap between window width 0 and the first breakpoint is called_initial media type.

It fixes a problem atredux-responsive in the calculation:

If the first breakpoint starts in a number bigger than 0 (let's call it X), it considers that everything between 0 and X as the first breakpoint when it's not true.

For example, our breakpoints start at 320 (XS),redux-responsive considers 270 as XS, a wrong calculation. We call it_initial.