useful-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    useful-components

    NPM version Build Status Coverage Status minified-size MIT License

    spinners

    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-components

    or yarn - whichever you prefer

    yarn add useful-components

    Import any spinner and customize it to your liking

    import { Ellipsis } from 'useful-components'
     
    const Loader = props => (
      <>
        {/* Use defaults (color #fff, size 64px) */}
        <Ellipsis />
     
        {/* Pass props like color and size (more in demo) */}
        <Ellipsis color="#ffdf00" size={40} />
     
        {/* Pass a CSS class to get full control over styling */}
        <Ellipsis className="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-loader

    Next, to render your styles, you can either

    • extract CSS into an external file (e.g. style.css) and load it using <link> (with mini-css-extract-plugin) or
    • inject CSS into <style> tag(s) in <head> section at runtime (i.e. when JS is executing, with style-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-plugin

    Lastly, add the following to your webpack.config.js

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        }
      ]
    },
    plugins: [new MiniCssExtractPlugin()]

    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

    module.exports = [
      {
        module: {
          rules: [
            {
              test: /\.css$/,
              use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
          ]
        },
        plugins: [new MiniCssExtractPlugin()]
      },
      {
        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

    <link
      rel="stylesheet" crossorigin="anonymous"
      href="https://unpkg.com/useful-components@latest/dist/style.css"
    />
     
    <!-- Include react, react-dom, and prop-types development <script> tags above -->
    <script crossorigin src="https://unpkg.com/useful-components@latest/dist/bundle.js"></script>

    In production, use a minified and optimized version

    <link
      rel="stylesheet" crossorigin="anonymous"
      href="https://unpkg.com/useful-components@latest/dist/style.min.css"
    />
     
    <!-- Include react and react-dom production <script> tags above -->
    <script crossorigin src="https://unpkg.com/useful-components@latest/dist/bundle.min.js"></script>

    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.

    Install

    npm i useful-components

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    38

    Last publish

    Collaborators

    • dudusotero