react-cssfx-loading's Introduction

React CSSFx Loading

React wrapper for the CSSFx collection (loading animation only)

Original Design and Code: https://cssfx.netlify.app/

Preview

Live demo

Demo: https://react-cssfx.surge.sh/
Storybook: https://cssfx-storybook.vercel.app/

Usage

// Import Components

// Tree shakable
import { BarWave } from "react-cssfx-loading";

// Render
<BarWave />

// Available Props
<BarWave color="#FF0000" width="100px" height="100px" duration="3s" />

// It also supports all props of an HTML element (or JSX)
<BarWave onClick={() => alert("Clicked")} key="key" />

react-cssfx-loading's People

Contributors

Stargazers

react-cssfx-loading's Issues

Error: CSS Modules cannot be imported from within node_modules

I am on a TypeScript NextJS project trying to use a loading component from this package, so I installed the package with Yarn and tried to use it but I got this output:

error - ./node_modules/react-cssfx-loading/lib/Spin/Spin.module.css
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
Location: node_modules/react-cssfx-loading/lib/Spin/index.js

BTW this is the same with other components.
Here is my dependencies list, maybe something else is causing the issue:

  "dependencies": {
    "@types/jest": "^27.0.2",
    "@types/node": "^16.10.3",
    "@types/react": "^17.0.27",
    "@types/react-dom": "^17.0.9",
    "axios": "^0.23.0",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^5.1.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.0.10",
    "next": "^12.0.1",
    "react": "^17.0.2",
    "react-cssfx-loading": "^1.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "sass": "^1.42.1",
    "styled-components": "^5.3.1",
    "typescript": "^4.4.3"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.2",
    "@types/jsonwebtoken": "^8.5.5",
    "@types/styled-components": "^5.1.14",
    "babel-plugin-styled-components": "^1.13.2",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }

Recommend Projects