https://github.com/dangreenisrael/safe-spinner

This is a react component that wraps spinners with a timeout
https://github.com/dangreenisrael/safe-spinner

Last synced: 3 months ago
JSON representation

This is a react component that wraps spinners with a timeout

• Host: GitHub
• URL: https://github.com/dangreenisrael/safe-spinner
• Owner: dangreenisrael
• Created: 2020-02-15T17:42:50.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:22:09.000Z (about 2 years ago)
• Last Synced: 2024-10-12T17:36:28.122Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.92 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 33
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Safe Spinner

This package helps address the risk of 'infinite spinners' by allowing you to fire a handler when they occur. Generally this would send an event to a service like [Sentry](https://getsentry.com/).

This component only renders it's children, it does not add any new UI element.

## Installation

`npm install safe-spinner`

`yarn add safe-spinner`

Note: typescript definitions are included out of the box

## Usage

### Props

| name        | type          | required | default     |

| ----------- | ------------- | -------- | ----------- |

| `onTimeout` | `() => void`  | yes      | `undefined` |

| `timeout`   | `number` (ms) | `no`     | `10000`     |

### Using the default 10 second timeout

```jsx

import React from 'react';

import SafeSpinner from 'safe-spinner';

import Spinner from './Spinner';

const handleSpinnerTimeout = () => {

  console.log('the spinner timed out after the 10 second default');

};

const MyComponent = () => {

  

    

  ;

};

```

### Using a custom timeout

```jsx

import React from 'react';

import SafeSpinner from 'safe-spinner';

import Spinner from './Spinner';

const handleSpinnerTimeout = () => {

  console.log('the spinner timed out after 60 seconds ');

};

const MyComponent = () => {

  

    

  ;

};

```