React Typescript Loaders

Introduction

React Typescript Loaders is a nice, simple package for your React applications. Out of the box, with no extra configuration, you get a default spinner that uses the foreground colour for the element you place it in.

Want to change the colour? How about a duotone loader? Change the size? All are really easy to do and are fully typed.

Getting Started

Install the package via npm:

1npm install react-ts-loader

Import into your project. There is no need to import the CSS -- it is included via Styled Components

1import Loader from 'react-ts-loaders'

Drop the Loader component into your application wherever you need it. This will use the default Loader, a Spinner, and the foreground colour for the element where you placed it.

1<Loader />

The whole thing looks something like this:

1import * as React from 'react'
2import Loader from 'react-ts-loaders'
3
4const MyComponent = () => {
5   return (
6      <Loader />
7   )
8}
9
10export default MyComponent

You can configure every aspect of the Loader via the following props. See the README or the GitHub page for more details.

1import * as React from 'react'
2import Loader from 'react-ts-loaders'
3
4const MyComponent = () => {
5   return (
6      <Loader
7         type="ripple"
8         color="#ec18dd"
9         altColor="#7b1a83"
10         size={300}
11         message="Updated information is loading"
12         className="alt-loader"
13      />
14   )
15}
16
17export default MyComponent

Spinner

Content is loading.

Customize

Primary Color
<Loader type="spinner" color="#a00598" size={150} />

Pulse

Content is loading.

Customize

Primary Color
<Loader type="pulse" color="#a00598" size={150} />

Dual Rings

Content is loading.

Customize

Primary Color
<Loader type="dualring" color="#a00598" size={150} />

Hourglass

Content is loading.

Customize

Primary Color
<Loader type="hourglass" color="#a00598" size={150} />

Dot Spinner

Content is loading.

Customize

Primary Color
<Loader type="dotspinner" color="#a00598" size={150} />

Ellipsis

Content is loading.

Customize

Primary Color
<Loader type="ellipsis" color="#a00598" size={150} />

Ring

Content is loading.

Customize

Primary Color
<Loader type="ring" color="#a00598" size={150} />

Roller

Content is loading.

Customize

Primary Color
<Loader type="roller" color="#a00598" size={150} />

Grid

Content is loading.

Customize

Primary Color
<Loader type="grid" color="#a00598" size={150} />

Circle

Content is loading.

Customize

Primary Color
<Loader type="circle" color="#a00598" size={150} />

Ripple

Content is loading.

Customize

Primary Color
<Loader type="ripple" color="#a00598" size={150} />