custom paging slider missing config file for react.js - javascript

I am creating the custom paging slider from https://react-slick.neostack.com/docs/example/custom-paging/ I copied the code directly from the website and follow the instructions and installed the packages. When i try to run the code though i get the following error:
./src/Carousel.js
Module not found: Can't resolve './config.js' in '/Users/mcoe/Documents/Code/my-app1/src'
Code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Style from "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Slider from 'react-slick';
import { baseUrl } from "./config.js";
export default class SimpleSlider extends React.Component {
render() {
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}"Random1${i + 1}.png`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
</Slider>
</div>
);
}
}

It looks like the component just wants a base url from a config file. The baseUrl needs to be the url path of your images. A relative path should work so if they are stored in my-app1/public/images/ you should be able to create a file config.js in the src directory like this:
//config.js
export const baseUrl = 'images/';

What it looks like currently, works. have not gotten the arrows to appear or images to appear in the dots underneath

Related

Loading svg in preact with vite

I wonder how can I load svg`s in preact & vite for now I have tried simple import
import SvgLogo from './test.svg'
export const Logo = () => (
<SvgLogo />
)
but I doesnt render anything.
Universal solution for multiple images.
Two files:
assets.js
main.js
assets.js :
export { default as prelogo } from '../assets/images/prelogo.png';
export { default as logo } from '../assets/images/logo.png';
main.js :
import * as assets from '../assets';
...
<div>
<img src={assets.prelogo} alt="" />
<img src={assets.logo} alt="" />
</div>
Try using the img tag:
import SvgLogo from './test.svg'
export const Logo = () => (
<img src={SvgLogo} />
)
If you want to render image with any kind of extension whether it is SVG or PNG or JPG by Importing the image, you need to use the <img/> tag.
change the code to,
import SvgLogo from './test.svg'
export const Logo = () => (
<img src={SvgLogo}/>
)
it should do the work

Why are my icons being placed as a column instead of as a row?

I am trying to align these icons as a row using className="col s1" but when I run this code its displayed in a column for some reason. I've tried removing the container tag, adding it, ive tried changing the column sizes, but for some reason it is always displayed as a column instead of as a row.
Is there any way i can get this to work?
Here is a link to the code: Project
Main.jsx
import React, { useState, useEffect, useRef } from "react";
import Helmet from "react-helmet";
import Socials from "./Socials";
function Main(props) {
const socialMedia = [
{
link: "https://www.linkedin.com/in/",
icon: "linkedin"
},
{
link: "https://github.com/",
icon: "github"
},
{
link: "https://www.youtube.com/",
icon: "youtube"
},
{
link:
"mailto:example#ex.co?subject=Felipe%20GD%20--%20Request%20To%20Contact",
icon: "email"
}
];
return (
<React.Fragment>
<Helmet>
<title>Felipe GD</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Helmet>
<div className="container">
<div clasName="row">
{socialMedia.map((socials) => (
<Socials
getOpacity={null}
getVisibility={null}
link={socials.link}
icon={socials.icon}
/>
))}
</div>
</div>
</React.Fragment>
);
}
export default Main;
Socials.jsx
import React, { useEffect, useRef } from "react";
import { SocialIcon } from "react-social-icons";
function Socials(props) {
let size = useRef("20");
useEffect(() => {
if (window.innerWidth > 500) {
size.current = 50;
} else {
size.current = 25;
}
}, [size]);
return (
<React.Fragment>
<div className="col s1">
<SocialIcon
id={props.icon}
bgColor="#2C2C2C"
fgColor="#ECCECE"
network={props.icon}
url={props.link}
/>
</div>
</React.Fragment>
);
}
export default Socials;
I know i could get this to work by not making it into a component but that doesent look clean to me, id like to be able to use the map function if possible.
It looks like you are using Bootstrap library, however there is no dependency in package.json. It means you should install this dependency:
npm i react-bootstrap
After installing bootstrap, it is necessary to edit small typo:
<div clasName="row">
should be:
<div className="row">
Alternative way:
Another way is to create own style. An example can be seen at sandbox
So you can:
Create "styles.css"
create new class:
.myRow {
display: flex;
}
include in your component:
import "./styles.css"
apply style for your component:
<div className="myRow" >
{socialMedia.map((socials) => (
<Socials
getOpacity={null}
getVisibility={null}
link={socials.link}
icon={socials.icon}
/>
))}
</div>

react-slideshow-image package not loading images from google drive

I've been trying for two days to make heads or tails of the react-slideshow-image package. I've installed all the missing dependencies by hand, I tried moving the images folder around (anything outside of src threw an error immediately though...), and I also tried uploading my images to an external google drive and substituting their links for the ones given in the example. I've disabled all other components inside the App.js.
Bottom line: the package only works if I use the image links provided in the example. No other images are ever detected.
Here is my code (copied and pasted from the example):
import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
// import images from "./images/homepage";
const fadeImages = [
"https://drive.google.com/file/d/1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ/view?usp=sharing",
"https://drive.google.com/file/d/11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP/view?usp=sharing",
"https://drive.google.com/file/d/1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN/view?usp=sharing"
// "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
// "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
];
export default function App() {
return (
<div className="slide-container">
<Fade>
<div className="each-fade">
<img src={fadeImages[0]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[1]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[2]} alt=""/>
</div>
</Fade>
</div>
);
}
Original unspalsh image links have been commented out to see if my links work, but they don't. Using images other than the ones provided seems to crash the slider entirely.
screenshot of live server view of my webstie
App.js is rendered correctly, console does not log a sinle glitch.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
// import Carousel from "./components/main/Carousel.js";
// const divStyle = {
// position: "absolute"
// }
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
What am I doing wrong?
You need to store the images ids and use a different path to get the image url https://drive.google.com/uc?id="<file-id>:
const fadeImages = [
"1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ",
"11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP",
"1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN"
];
const PATH = "https://drive.google.com/uc?id=";
then:
export default function App() {
return (
<div className="slide-container">
<Fade>
{fadeImages.map(src => (
<div className="each-fade">
<img src={`PATH${src}`} alt="" />
</div> ))
}
</Fade>
</div>
);
}

Error: Images Array loop from another images folder in REACT

I want to make shopping app in react but i did wrong thing where i dont know.What is the error?
I want to import images and looping them according to "sku number" but i just fetch header of images. I can't see images, i can't fetch them.
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
This is the fetch code . I have tried and i'm trying different codes for fetching but it doesn't work.
Products.js :
import React, { Component } from "react";
import a from "./a.json";
import "./styles.css";
class Products extends Component {
state = {
products: a.products
};
render() {
const productItems = this.state.products.map(product => (
<div className="col-md-4">
<div
className="thumbnail text-center"
style={{ backgroundColor: "black" }}
>
<a href={product.id} onClick={this.props.handleAddToCart}>
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
</a>
</div>
</div>
));
return <div className="row">{productItems}</div>;
}
}
export default Products;
And the sight of folders:
And the sku numbers for matching with photo's names.
The sight of page
Try changing this line:
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
for:
<img src={`../src/images/${product.sku}.jpg`} alt={product.title} />
In order for you to embed Javascript into any React component, remember to always enclose your code block in {brackets}. Since backticks belong to Javascript syntax, the enclosing brackets must be added.

TypeError using Materialize-CSS with React

i'm having a problem using Materialize-CSS carousel.
The standard way to create the carousel is :
<div class="carousel">
<a class="carousel-item" href="#one!"><img
src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img
src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img
src="https://lorempixel.com/250/250/nature/3"></a>
</div>
But I want to create a carousel item for every item in an array named
"products" hence i'm trying this code in the JSX :
<div className="carousel">
{generalStore.products.map(p =>
<a className="carousel-item"><img src={p.pic} /></a>)}
</div>
p,pic == image url
But this returns an error :
TypeError: Cannot read property 'clientWidth' of undefined
Ant ideas to solve this?
Thanks
It can be implemented in materializeCSS also.
For this, you need to do npm install materialize-css#next. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() has to be made and then it can be used in ref.
CodeSandBox - Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import data from "./data.json";
class Carousel extends Component {
componentDidMount() {
const options = {
duration: 300,
onCycleTo: () => {
console.log("New Slide");
}
};
M.Carousel.init(this.Carousel, options);
}
renderThis = () => {
return data.map(i => (
<a key={i.url} className="carousel-item">
<img src={i.url} />
</a>
));
};
render() {
return (
<div
ref={Carousel => {
this.Carousel = Carousel;
}}
className="carousel"
>
{this.renderThis()}
</div>
);
}
}
export default Carousel;

Categories