@claritycodeweb/inhibit

1.0.5 • Public • Published

inhibit

Made with create-react-library

NPM JavaScript Style Guide npm bundle size (minified)

Inhibit

Heroku is super cool platform to host your projects for free. If an app has a free web dyno, and that dyno receives no web traffic in a 30-minute period, it will sleep. Here react-inhibit can help a lot it will display loading indicator until machine wakes up. When server is awake it will push to display website content.

Install

npm install --save @claritycodeweb/inhibit

Live example

Link to example

Simple Usage

import React from 'react'

import { Inhibit as LinkTo } from 'inhibit'
import 'inhibit/dist/index.css'

const App = () => {
  return (
      <LinkTo
        to={'https://your_heroku_app.herokuapp.com/'}
        name='Your Heroku App Name'
      >
        <span>Link</span>
      </LinkTo>
  )
}

Advance Usage

import React from 'react'

import { Inhibit as LinkTo } from 'inhibit'
import 'inhibit/dist/index.css'

const SpinnerStyle = ({ name, to }) => {
  return (
    <div
      style={{
        height: '100vh',
        width: '100vw',
        backgroundColor: 'lightgrey',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <span>
        {name} {to}
      </span>
    </div>
  )
}

const SpinnerClass = ({ name, to }) => {
  return (
    <div className={'spinner'}>
      <span>
        {name} {to}
      </span>
    </div>
  )
}

const App = () => {
  return (
    <div className="links">
      <LinkTo
        to={'https://your_heroku_app.herokuapp.com/'}
        name='Your Heroku App Name'
      >
        <span>link default</span>
      </LinkTo>
      <LinkTo
        to={'https://your_heroku_app.herokuapp.com/'}
        name='Your Heroku App Name'
        Spinner={SpinnerStyle}
      >
        <span>link example with custom spinner 1</span>
      </LinkTo>
      <LinkTo
        to={'https://your_heroku_app.herokuapp.com/'}
        name='Your Heroku App Name'
        Spinner={SpinnerClass}
      >
        <span>link example with custom spinner 2</span>
      </LinkTo>
    </div>
  )
}

License

MIT © Rafał Pisarczyk

Package Sidebar

Install

npm i @claritycodeweb/inhibit

Weekly Downloads

2

Version

1.0.5

License

MIT

Unpacked Size

6.2 MB

Total Files

7

Last publish

Collaborators

  • claritycodeweb