useful-components
CSS-only spinners for React from loading.io
- ✂️ Zero dependencies
- 💥 Written in TypeScript
- 🚀 Tree-shaking baked in
- 💅 No extra CSS imports
Demo
Browse components and explore their props with Storybook.
Quick Start
Install the package with npm
npm i useful-componentsor yarn - whichever you prefer
yarn add useful-componentsImport any spinner and customize it to your liking
import Ellipsis from 'useful-components' const Loader = <> /* Use defaults (color #fff, size 64px) */ <Ellipsis /> /* Pass props like color and size (more in demo) */ <Ellipsis ="#ffdf00" = /> /* Pass a CSS class to get full control over styling */ <Ellipsis ="my-ellipsis" /> </>Complete info about props can be found in the demo.
Prerequisites
This library imports its styles through JavaScript. To make it work, you may need to tweak your config.
Create-React-App
No changes are required, as CRA already handles CSS. Feel free to skip this! 🎉
Webpack
First, you'd need css-loader to resolve CSS imports
npm i -D css-loaderNext, to render your styles, you can either
- extract CSS into an external file (e.g.
style.css) and load it using<link>(withmini-css-extract-plugin) or - inject CSS into
<style>tag(s) in<head>section at runtime (i.e. when JS is executing, withstyle-loader)
Generally, you'd want to generate your CSS only once at build time, so we'll go with the former
npm i -D mini-css-extract-pluginLastly, add the following to your webpack.config.js
module: rules: test: /\.css$/ use: MiniCssExtractPluginloader 'css-loader' plugins: For more advanced options (caching, minification, etc.), see mini-css-extract-plugin docs.
Webpack with SSR
As with the config above, you'd need css-loader. Unfortunately, you can't use either mini-css-extract-plugin or style-loader with server-side rendering. One workaround would be to ignore CSS in server config and instead extract it out on the front-end. In your webpack.config.js
moduleexports = module: rules: test: /\.css$/ use: MiniCssExtractPluginloader 'css-loader' plugins: module: target: 'node' rules: test: /\.css$/ loader: 'css-loader' options: onlyLocals: true There are a few other caveats, so it's best to check with a working SSR example. An alternative to this would be to use isomorphic-style-loader. There is also babel-plugin-css-modules-transform that can strip away require statements on CSS files (you'd need to include useful-components under babel-loader).
Rollup
If you use Rollup, consider rollup-plugin-postcss. It exposes an extract option to extract your styles into a .css file. Alternatively, you could use rollup-plugin-scss or rollup-plugin-css-only which would do the same thing.
Parcel
Parcel comes with built-in support for .css files and @imports, so this library should work out of the box.
CDN
Be advised that it's recommended to use NPM for best performance and minimal CSS & JS footprint.
For development and debugging, use an unminified version
<!-- Include react, react-dom, and prop-types development <script> tags above -->In production, use a minified and optimized version
<!-- Include react and react-dom production <script> tags above -->Browser Support
To allow for customization, the library uses CSS variables which are supported on all major browsers except IE 11.
Examples
You will find further demos under /examples folder
Docs
Read about the rationale for the styling solution and build toolchain.
Copyright
CSS spinners from loading.io are used under CC0 license.