npm

Need private packages and team management tools?Check out npm Orgs. »

react-spinner-component

0.2.2 • Public • Published

React Spinner Component

A library for loading screen specifically for React js.

react-spinner-component

A library of React components created using npx create-react-app.

Installation

Run the following command: npm install react-spinner-component

Browser Support

Chrome Firefox IE Safari Opera
Latest ✔ Latest ✔ 10+ ✔ Latest ✔ Latest ✔

Installation

react-spinner-component is available via npm

Using npm:

$ npm install react-spinner-component --save
                    Or
npm i react-spinner-component --save OR npm install react-spinner-component --save

Usage

Import react-spinner-component in in the root module(App.js):

// Import library module
import {ReactLoadingView} from 'react-spinner-component';

Now use in your template

<ReactLoadingView
          loading={true}
          bgColor='#f1f1f1'
          spinnerColor='#E88634'
          textColor='#676767'
          textStyle='100'
          logoSrc='https://cdn-images-1.medium.com/max/512/1*6kK9j74vyOmXYm1gN6ARhQ.png'
          LoaderView='line-scale'
          customheight='100%'
          text='Let Fire Up the React' 
          customClassAdd = 'class'
      >
 //Your Entire DOM
 // Code
</ReactLoadingView>

React Spinner Component usage

  • loading Make ite True or False
  • bgColor Loading Screen Color
  • spinnerColor Spinner Color
  • textColor Text Color
  • textStyle Text Style (In css we use font-weight same like that)
  • logoSrc Your Logo Path
  • LoaderView Loader View is the third party Dependence (React-Spinkit), you can pass the name of the Spinkit Spinners name. You can find in this URL: https://kyleamathews.github.io/react-spinkit/
  • customheight Set Custom Height for the entire view
  • text You can enter the custom text
  • customClassAdd Add Specfic Class name to the Spinner

React Spinner Component

<ReactLoadingView
          loading={true}
          bgColor='#f1f1f1'
          spinnerColor='#E88634'
          textColor='#676767'
          textStyle='100'
          logoSrc='https://cdn-images-1.medium.com/max/512/1*6kK9j74vyOmXYm1gN6ARhQ.png'
          LoaderView='line-scale'
          customheight='100%'
          text='Let Fire Up the React' 
          customClassAdd = 'class'
      >
 //Your Entire DOM
 // Code
</ReactLoadingView>

Versioning

react-spinner-component will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Sukhjeet Singh

Future Plan

  • Make more customize
  • Try to remove React-Spinkit dependence
  • And suggestion are welcome by mails.
  • Git repository for the issues and suggestion.

Credits

Inspired by React-Spinkit Help by [Nikunj Jariwala, Yuvraj Chauhan]

## License

The MIT License (MIT)

install

npm i react-spinner-component

Downloadsweekly downloads

13

version

0.2.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability