react-render-at v1.2.1

React Render At

Installation

npm install react-render-at

Default Breakpoints

Usage

This package can be used in three different ways:

• Via component

import React from 'react'
import {RenderAt} from 'react-render-at'
  
function App () {
  return (
      <RenderAt desktop>
          Content  
      </RenderAt>
  )
}

Available props

• Via Higher Order Component

import React from 'react'
import {withReanderAt} from 'react-render-at'  
  
function App(props) {
  return (
   {
     props.isDesktop && <p>Content in Desktop</p>
   }
   {
     props.isLaptop && <p>Content in Laptop</p>
   }
   {
     props.isTablet && <p>Content in Tablet</p>
   }
   {
     props.isMobile && <p>Content in Mobile</p>
   }
  )
}

export default withRenderAt(App)

Available props

• Via Hooks

You have to wrap your app within RenderAtProvider and then:

import React from 'react'
import {useRenderAt} from 'react-render-at'
  
function App() {
  const { isDesktop, isLaptop, isTablet, isMobile } = useRenderAt()

  return (
    {
      isDesktop && <p>Content in Desktop</p>
    }
    {
      isLaptop && <p>Content in Laptop</p>
    }
    {
      isTablet && <p>Content in Tablet</p>
    }
    {
      isMobile && <p>Content in Mobile</p>
    }
  )
}

export default App

Available props

Config

You can change the default debounce time by calling setDebounceTime at the beginning of your app:

import React from 'react'
import RenderAt from 'react-render-at'

RenderAt.setDebounceTime(250) // Resize event debounce time in milliseconds.

You can override the default breakpoints by calling setBreakpoints at the beginning of you app:

import React from 'react'
import RenderAt from 'react-render-at'

RenderAt.setBreakpoints({
  desktop: {minWidth: 1024, maxWidth: Infinity}
})

Available object props