Giter VIP home page Giter VIP logo

better-react-spinkit's Introduction

better-react-spinkit

npm npm travis standard

A collection of loading indicators animated with CSS, powered by React.

Donate

BTC: 33dgdBhV1Yf5ERKLLKS7ztEAEEx3zTvSkw
ETH: 0xa6938ead6d6820377fed78b657e4eb6c5c44d1b3

Install

npm i better-react-spinkit

Usage

import {
  ChasingDots,
  Circle,
  CubeGrid,
  DoubleBounce,
  FadingCircle,
  FoldingCube,
  Pulse,
  RotatingPlane,
  ThreeBounce,
  WanderingCubes,
  Wave
} from 'better-react-spinkit'

// somewhere in a render function ...
<Circle />

Context Configuration

Optionally, you can configure size and color props in context to avoid managing configuration on each instance.

import { default as React, Component, PropTypes } from 'react'
import { ThreeBounce } from 'better-react-spinkit'

class Application extends Component {
  static childContextTypes = {
    betterReactSpinkit: PropTypes.object
  };
  getChildContext () {
    return {
      betterReactSpinkit: {
        color: 'green',
        size: 25
      }
    }
  }
  render () {
    // Inline props override the contextual settings.
    return (
      <ThreeBounce size={15} color='blue' />
    )
  }
}

Contributing

Contributions welcome! Please read the contributing guidelines first.

License

ISC

Documentation

๐Ÿ‘€ docs

better-react-spinkit's People

Contributors

amannn avatar bentatum avatar findoo avatar raffihsieh avatar rvanmil avatar sachalifs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

better-react-spinkit's Issues

inline-style-prefixer should be a dependency, not devdependency

Getting "missing peer dependency" of inline-style-prefixer in npm install, and webpack build fails on an import of inline-style-prefixer.

Adding inline-style-prefixer as a dependency in my project's package.json fixes the issue, so I assume it should be a dependency in its own project.

Will create a PR if I get a chance.

The CubeGrid randomly flashes.

I'm using chromium on X and the CubeGrid animation works for the most part. However, the cubes periodically grow to about 20x their intended size from a moment creating a flashing effect as the cubes fill a large portion of the screen. This happens even on the demo pages. It seems to happen when the component is small.

Server side rendering

Not working as expected when using SSR.

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. 
React injected new markup to compensate which works but you have lost many of the benefits of server rendering. 
Instead, figure out why the markup being generated is different on the client or server:
 (client)  brsk-fading-circle-f2df12b1-287e-4b35-9
 (server)  brsk-fading-circle-7a1c6164-7f89-4b1d-a

Seams the animation name gets generated again at client side.
Is this something you could fix or is it to much of a rewrite?

Idea: Possibility for additional styles

Hey everyone,

i am playing around with the FoldingCube spinner and was wondering if it would be possible to pass some sort of style props to it like border-color.

this is the style i am trying to achieve:
spinner

lovely greetings

Unable to center the Circle

Plugging in a <Circle /> into my web app, it aligns left.

Appears the only place where I can get it to center is if I put "margin:auto;" in the <div style="..."> element when exploring with Chrome.

Unfortunately, that is completely inaccessible through the API. Is this something that could be extended, allowing custom bits of CSS or classes to be injecting?

_lodash.omitBy is not a function [FIXED]

Getting some error referring to lodash when trying to render Circle. I am using Lodash ver 4.17.4 in my project.

bundle.js:65691 Uncaught (in promise) TypeError: (0 , _lodash.omitBy) is not a function
    at exports.default (bundle.js:65691)
    at BaseCircle (bundle.js:33450)
    at bundle.js:102079

It's at the bottom of this function:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var prefixer = new _inlineStylePrefixer2.default();

exports.default = function (_ref) {
  var delay = _ref.delay,
      duration = _ref.duration,
      fillMode = _ref.fillMode,
      iterationCount = _ref.iterationCount,
      name = _ref.name,
      timingFunction = _ref.timingFunction;

  if (name) {
    /* eslint-disable no-param-reassign */

    /*
    *  don't apply defaults unless we have a name declaration
    *  otherwise, assume we're using this to override properties
    */

    duration = duration || '1.2s';
    iterationCount = iterationCount || 'infinite';
    timingFunction = timingFunction || 'ease-in-out';

    /* eslint-enable no-param-reassign */
  }

  return prefixer.prefix((0, _lodash.omitBy)({
    animationDelay: delay,
    animationDuration: duration,
    animationFillMode: fillMode,
    animationIterationCount: iterationCount,
    animationTimingFunction: timingFunction,
    animationName: name
  }, function (val) {
    return !val;
  }));
};

Would you know how to get around this?

option preset invalid

With react version 0.44, I got this error :


TransformError: C:\Git\notilusMobile\node_modules\better-react-spinkit\dist\index.js: [BABEL] C:\Git\notilusMobile\node_modules\better-react-spinkit\dist\index.js: Unknown option: C:\Git\notilusMobile\node_modules\
react\react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

Delay on show

There is a delay when I show this component, Is there a way to remove this delay?

Fix `latest` tag

The latest tag points to the four-year-old version v2.0.4 (see e.g. here or npm dist-tag ls). This should probably be changed in order to include the most recent changes. Please note that while git tags v2.0.5 and v2.0.6 exist, they do not point to commits on the master branch.

Slight delay on render

Awesome job on this :D Although, there seems to be a 0.5-1 second delay before the spinner actually shows up. I noticed this on the docs site. Is this due to a default fade in? If so, it would be nice to determine the duration of fade-in, or no fade in at all.

i dont know why, but it broken

i installed lodash

20:31:57 webpack.1   | ERROR in ./~/lodash/lodash.js
20:31:57 webpack.1   | Module not found: Error: Can't resolve 'define' in '/Users/Documents/Sources/client/node_modules/lodash'
20:31:57 webpack.1   |  @ ./~/lodash/lodash.js 2:13-30
20:31:57 webpack.1   |  @ ./~/better-react-spinkit/dist/CubeGrid/index.js
20:31:57 webpack.1   |  @ ./~/better-react-spinkit/dist/index.js
20:31:57 webpack.1   |  @ ./assets/javascripts/modules/account/components/content.jsx
20:31:57 webpack.1   |  @ ./assets/javascripts/modules/account/index.js
20:31:57 webpack.1   |  @ ./assets/javascripts/modules/account/index.jsx
20:31:57 webpack.1   |  @ ./assets/javascripts/store/index.js
20:31:57 webpack.1   |  @ ./assets/javascripts/index.js
20:31:57 webpack.1   |  @ multi ./assets/javascripts

BUG: Filter out unnecessary props rather than pass them through to DOM elements

index.js:2178 Warning: React does not recognize the `columnWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `columnwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in span (created by Base)
    in Base (created by ThreeBounce)
    in ThreeBounce (at index.js:33)

You are passing through all props that come through the component even when you shouldn't and it results in this warning in the console.

Yes, ThreeBounce doesn't have columnWidth. But it is a valid prop for other types of loaders and you shouldn't pass it through if it's not used.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.