React Typescript Loaders

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