https://github.com/axyz/rezponsive

React decorator for responsive behaviors
https://github.com/axyz/rezponsive

Last synced: 3 days ago
JSON representation

React decorator for responsive behaviors

• Host: GitHub
• URL: https://github.com/axyz/rezponsive
• Owner: axyz
• Created: 2016-04-05T12:21:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:13:24.000Z (almost 2 years ago)
• Last Synced: 2024-11-13T03:45:52.605Z (6 days ago)
• Language: JavaScript
• Size: 2.83 MB
• Stars: 5
• Watchers: 5
• Forks: 3
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
rezponsive

==========

React decorator for responsive behaviors.

When developing applications for multiple screen sizes and devices we often need

our components to know the current matched mediaquery in order to adapt its

aspect and behavior.

Rezponsive is a decorator for React components that will inject those

informations to its children props and/or context.

Usage

-----

Add `rezponsive` as a dependency

`$ npm install --save rezponsive`

then simply decorate your root container component

```javascript

import React from 'react';

import Rezponsive from 'rezponsive';

@Rezponsive // when stage-3 is available

class MyApp extends Component {

    render() {

        // currentMedia and isTouch are available here

        ...

    }

}

export default MyApp;

// or without stage-3

export default Rezponsive(MyApp);

```

`props.currentMedia` will be an object in the format:

```javascript

{

    mediaqueryName1: bool (true if matches current mediaquery),

    mediaqueryName2: bool (true if matches current mediaquery),

    ...

}

```

To define your mediaqueries you should provide an `mq` object in the formats

supported by the [mediaquery library](https://github.com/axyz/mediaquery)

```javascript

```

on isomorphic app you probably want to define a `severMedia` to choose what to

render on server side and eventually provide the isTouchOnServer property in

case you want to render as it is a touch device.

MatchMedia detection will cause an additional rendering when the component is

mounted in order to update the state accordingly to the matched queries.

For heavy components this may lead to performance issues on first loading,

to avoid that you can provide an `clientMedia` prop that will be used for the

initial rendering and the state will only change if the current mediaquery

changes. Of course however you have to be sure that `clientMedia` reflect the

current media query, otherwise your app will start with the wrong settings

and will keep them until a resize big enough to trigger matchmedia updates.

Sometimes you may want to have mediaquery informations on really deep nested

object, rezponsive will inject currentMedia and isTouch not only on props, but

also on the context of the underlying react subtree.

You can easily access the context on a child component using the exported `RezponsiveContext`

```javascript

import Rezponsive, { RezponsiveContext } from 'rezponsive';

const Component = Rezponsive(({ currentMedia, isTouch }) => {

  return (

    

      {({ currentMedia, isTouch }) => (

        
{JSON.stringify({ currentMedia, isTouch })}

      )}

    

  );

});


```

or using the provided helper decorator `RezponsiveConsumer`

```javascript

const Component = RezponsiveConsumer(({ currentMedia, isTouch }) => (

  
{JSON.stringify({ currentMedia, isTouch })}

));


// assuming that MyApp is decorated with Rezponsive

  

```

In case you want to use an external listener to update `clientMedia`, you can

set the `disableListeners` prop to `true` and manually update `clientMedia` and `isTouch`.