Skip to content

faustienf/request-stripe

Repository files navigation

npm-version

request-stripe

🌈 The tiny library for rendering a progress bar on top your screen.

Features

  • πŸ“¦ Zero dependencies
  • πŸ•― Framework agnostic, using vanila API
  • πŸ—œ Less 3 KB
  • πŸ”¨ Tiny API
  • βš™οΈ Customize render and styles
  • 🧲 Autocombine requests

Getting Started

npm install request-stripe
import { requestStripe } from 'request-stripe';

fetch().finally(requestStripe());
// or
const done = requestStripe();
fetch().finally(() => {
  done();
});

Customization

Styles via .request-stripe-custom

.request-stripe-custom {
  color: #e11d48;
  animation-name: custom-process, custom-finish;
  animation-...
}

.request-stripe-custom[data-state='process'] {
  animation-play-state: running, paused;
}

.request-stripe-custom[data-state='finish'] {
  animation-play-state: paused, running;
}

@keyframes custom-process {
  ...
}

@keyframes custom-finish {
  ...
}

Render

import { Render, requestStripe } from 'request-stripe';

// Write a render function
const customRender: Render = () => {
  const customElement = document.createElement('div');
  document.body.appendChild(customElement);

  return () => {
    document.body.removeChild(stripeElement);
  };
};

// Pass the function
const done = requestStripe(customRender);
fetch().finally(done);