@claritycodeweb/inhibit

React inhibit component - slow down redirect

Usage no npm install needed!

<script type="module">
  import claritycodewebInhibit from 'https://cdn.skypack.dev/@claritycodeweb/inhibit';
</script>

README

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