❤
npm
Sign UpSign In

react-adaptive

2.0.2 • Public • Published

react-adaptive NPM JavaScript Style Guide

A Higher Order Component (HOC) allowing you to adapt your component display according to its own size and integrate you website with adaptive design.

Information

Package react-adaptive
Description Element size in react for adaptive design
Example (basic for now) https://lokymil.github.io/react-adaptive/

Install

npm install --save react-adaptive

Usage

Using withAdaptive HOC

In that case, you have to define a function receiving the size of the component and returning expected component according to your own process.

import React, { Component } from 'react';
import { withAdaptive } from 'react-adaptive';
 
class LargeComponent extends Component {
  render() {
    return (
      <div>
        My large component {this.props.name}
      </div>
    );
  }
}
 
class MediumComponent extends Component {
  render() {
    return (
      <div>
        My medium component {this.props.name}
      </div>
    );
  }
}
 
class SmallComponent extends Component {
  render() {
    return (
      <div>
        My small component {this.props.name}
      </div>
    );
  }
}
 
const mapSizeToComponent = size => props => {
  if (size.width < 400) {
    return <SmallComponent {...props} />;
  }
 
  if (size.width < 700) {
    return <MediumComponent {...props} />;
  }
 
  return <LargeComponent {...props} />;
};
 
export default withAdaptive({ mapSizeToComponent });

Using withBreakpoint HOC

In that case, you have to define a set of breakpoints, up to 7, and a set of associated components. You can define an optionnal default Component.
Breakpoints name :

import React, { Component } from 'react';
import { withBreakpoints, breakpoints } from 'react-adaptive';
 
class LargeComponent extends Component {
  render() {
    return (
      <div>My large component components.name}</div>
    );
  }
}
 
class MediumComponent extends Component {
  render() {
    return (
      <div>My medium component components.name}</div>
    );
  }
}
 
class SmallComponent extends Component {
  render() {
    return (
      <div>My small component components.name}</div>
    );
  }
}
 
const components = {
  [breakpoints.large]: LargeComponent,
  [breakpoints.medium]: MediumComponent,
  [breakpoints.small]: SmallComponent
};
 
const breakPoints = {
  [breakpoints.large]: 1000,
  [breakpoints.medium]: 700,
  [breakpoints.small]: 400
};
 
export default withBreakpoints(breakPoints)({
  components,
  defaultComponent: LargeComponent
});

Using withSize HOC

In that case, your component will have an additionnal props as:

size = { width: `current component width` }
import React from 'react';
import { withSize } from 'react-adaptive';
 
const MyComponent = ({ size }) => (<div>My own size is {size.width}</div>);
 
export default withSize(MyComponent);

License

MIT © Lokymil

Readme

Keywords

Package Sidebar

Install

npm i react-adaptive

Repository

github.com/Lokymil/react-adaptive

Homepage

github.com/Lokymil/react-adaptive#readme

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

36.3 kB

Total Files

6

Last publish

Collaborators

  • lokymil
Try on RunKit
Report malware