CODEWITHSUNDEEP
javascriptreactjsnpm
user15815618
user15815618

Reputation:

Style import (with webpack) on react js

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)

from npm And from the Documentation, they say we must add these instructions to import the CSS

my component

import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
 export  function Features() {


const images = [
    {
      original: 'https://picsum.photos/id/1018/1000/600/',
      thumbnail: 'https://picsum.photos/id/1018/250/150/',
    },
    {
      original: 'https://picsum.photos/id/1015/1000/600/',
      thumbnail: 'https://picsum.photos/id/1015/250/150/',
    },
    {
      original: 'https://picsum.photos/id/1019/1000/600/',
      thumbnail: 'https://picsum.photos/id/1019/250/150/',
    },
  ];
return (
  
     
    <div>
      <ImageGallery items={images} />;
  
    </div>
   )
 }

my packeg json

"dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.4",
    "@mui/material": "^5.2.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-image-gallery": "^1.2.7",
    "react-material-ui-carousel": "^3.1.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
},

But when I add this in my Component it gives me this ERROR

If there is no solution, please suggest to me the name of a library similar to this

enter image description here

Upvotes: 2

Views: 432

Answers (2)

user15815618
user15815618

Reputation:

Thanks everyone, the issue is resolved I added this to the component

import "react-image-gallery/styles/css/image-gallery.css";

  import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import {ImgGallery} from "./Styled.js"
export  function ShopDetails() {


    const images = [
        {
          original: 'https://picsum.photos/id/1018/1000/600/',
          thumbnail: 'https://picsum.photos/id/1018/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1015/1000/600/',
          thumbnail: 'https://picsum.photos/id/1015/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1019/1000/600/',
          thumbnail: 'https://picsum.photos/id/1019/250/150/',
           },
         ];
         return (
      
         
          <ImgGallery>
          <ImageGallery thumbnailPosition="left" useBrowserFullscreen={false} 
          showPlayButton={false} autoPlay={true} items={images} />;
      
        </ImgGallery>
        )
          }

Upvotes: 1

Can Berk Ocalir
Can Berk Ocalir

Reputation: 35

You must import only the components from the library, not the css or scss files. For example import ImageGallery from 'react-image-gallery' and use it below like <ImageGallery/> as usual.

If it's not successful than try to import css/scss files to index.js

Upvotes: 0

Related Questions