Getting an error while importing Loader from 'react-loader-spinner'?

user_10864454 0
Viewed 4486

The error I'm getting:

ERROR in ./src/components/Loading.jsx 9:33-39

export 'default' (imported as 'Loader') was not found in 'react-loader-spinner' (possible exports: Audio, BallTriangle, Bars, Circles, CradleLoader, Grid, Hearts, MutatingDots, Oval, Plane, Puff, RevolvingDot, Rings, TailSpin, ThreeDots, Triangle, Watch)

Here is my code:

import React from 'react';
import Loader from 'react-loader-spinner';

export const Loading = () => (
  <div className="flex justify-center items-center ">
    <Loader type="Puff" color="#00BFFF" height={550} width={80} />
  </div>
);
reactjs javascript
3 Answers

react-loader-spinner exports various loaders and you can use those loaders directly. And if you want to import all the loaders and use them. You can do it like this.

import * as Loader from "react-loader-spinner";

function App() {
  return <Loader.TailSpin />;
}

or

import {TailSpin} from "react-loader-spinner";

function App() {
  return <TailSpin />;
}

https://codesandbox.io/s/hopeful-herschel-652kq?file=/src/index.js:70-168

user_104293980

You just need to import that specific loader you want, as there are many of them that react-loader-spinner exports. For example the code below is for Rings loader.

All loader types are here on the official documentation.

import { Rings } from 'react-loader-spinner';

export const Loading = () => (
  <div className="flex justify-center items-center ">
    <Rings color="#00BFFF" height={80} width={80} />
  </div>
);
user_152886410

You can import specific one from react-loader-spinner

import React from 'react'
import {Triangle} from 'react-loader-spinner'
const Loading = () => {
  return (
    <div className='flex justify-center items-center'>
        <Triangle type='Puff' color='#00BFFF' height={550} width={80} />
    </div>
  )
}

export default Loading

https://mhnpd.github.io/react-loader-spinner/ Here you can find many examples of Loaders

user_147944380
Related