Can't get the npm package tiny-slider-react to work. Probably doing something basic wrong. It imports just fine without any errors, but it only displays the loadingimages without any functionality, just as if the images would be if you'd do <img />. The code is straight from the npm read me file.
import TinySlider from "tiny-slider-react";
import 'tiny-slider/dist/tiny-slider.css';
export default function Testimonials() {
const settings = {
lazyload: true,
nav: true,
mouseDrag: true
};
const imgs = [
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
"https://source.unsplash.com/random/200x400",
];
const loadingImage = "https://source.unsplash.com/random/100x100"
return (
<section className='h-screen bg-white dark:bg-gray-700'>
<TinySlider settings={settings}>
{imgs.map((el, index) => (
<div key={index} style={{ position: "relative" }}>
<img
className={`tns-lazy-img`}
src={loadingImage}
data-src={el}
alt=""
/>
</div>
))}
</TinySlider>
</section>
)
}
I expected it to work like the examples https://codesandbox.io/s/test-tiny-slider-react-forked-rmxcl?file=/index.js:752-784, here's one. I have installed the npm package and I don't think I get any errors in the browser console related to tiny slider. I tried using TinySlider just like OwlCarousel too, so basically just having <img /> props in the <TinySlider /> component, got the same issue.
Could it have something to do with the css file not importing correctly?
In React 18, it seems that TinySlider works normally when it is not wrapped in <StrictMode>.
Demo of the test: codesandbox
If <StrictMode> is still preferred in the same App, perhaps consider to enable it on other parts of the app, as recommended by React document.
TinySlider does not seem to have problems working in older versions of React, by the way.
Related
I am trying to use Laravel9 with Reactjs using laravel-breeze.
I made a new jsx file named Testpage.jsx only to check it work but Laravel keep gives me 404 not found page.
This is the link part in a Welcome.jsx page.
<div className="ml-4 text-lg leading-7 font-semibold">
<a href="/testpage"
className="underline text-gray-900 dark:text-white"
>
Test
</a>
</div>
And the routes/web.php
Route::get('/testpage', function () {
return Inertia::render('Testpage');
});
And the Testpage.jsx which is exists in resource/js/Pages/, same as the Welcome.jsx.
import React from "react";
export default function Testpage() {
return (
<>
<h1>TEST!!!!</h1>
</>
);
}
In the terminal, I am running the npm run dev command.
There are no errors at all.
I can see the 'Test' word in my Laravel page. However if I click the 'Test', then it shows me '404 | NOT FOUND' page.
And I checked the network tap in the browser, there is no Testpage.jsx at all.
What did I miss here?
I was so stupid. It was not working because there was the route cache.
When using the ityped package for my react.js website, it's showing double letters instead of one.
Screenshot: https://ibb.co/pd6GmHQ
While running once without the backDelay and backSpeed it was running fine by showing only one character. After removing both backDelay and backSpeed it is not running properly, i.e. its showing double digits.
I'm sorry if its a stupid question, I'm a newbie.
This is my jsx file:
import React, { useEffect, useRef } from 'react'
import "./intro.scss"
import { init } from 'ityped'
export default function Intro() {
const textRef = useRef();
useEffect(()=>{
init(textRef.current,{
showCursor: true,
backDelay: 1500,
backSpeed:60,
strings: ["Developer","Designer","Content Creator"],
});
},[]);
return (
<div className="intro" id="intro">
<div className="left">
<div className="imgContainer">
<img src="assets/smit.jpg" alt="" />
</div>
</div>
<div className="right">
<div className="wrapper">
<h2>Hi there, I'm</h2>
<h1>Smit Thakkar</h1>
<h3>Freelance <span ref ={textRef}></span></h3>
</div>
<a href="#probackground">
<img src="assets/down.png" alt="" />
</a>
</div>
</div>
)
}
I faced this problem today but when I removed stricked mode it worked
before:
<React.StrictMode>
<App />
</React.StrictMode>
After:
<App/>
The duplication problem is a combination of two main factors:
1.) This ityped package operates at the DOM level, which is discouraged in React, since it utilizes a virtual DOM that expects to be updated by updating React state. While this package can and does work, you're going to find that it duplicates when using StrictMode and useEffect -- in development, strict mode invokes useEffect twice; as a result, invokes init twice.
2.) The other reason it duplicates is because it uses setInterval that isn't cleaned up on a hot reload. So every time you make a change to the component, it'll duplicate the init functionality as shown here (make any change to the App.js file and notice that a new instance of init occurs every time a hot reload occurs; on that note, this example uses a hack work-around using an isLoading global variable, which I'd highly discourage using in your project).
Recommendations in order of hierarchy:
A.) Don't use the package at all.
B.) Don't use the package and instead develop the same functionality using React state/React life cycles that will clean itself up on hot reload/component unmount.
C.) Use the package and deal with the duplication in development, but know that this may not occur in production. Although... the fact that this package doesn't do any cleaning up on a component unmount should be disconcerting and may cause problems with MPAs (multi page applications), where the component is unmounted/remounted -- which may cause duplication issues in production. Even more disconcerting is that this package doesn't have any guard against the element being undefined, so it'll throw errors as well.
You can use Typewriter instead of ityped.
Just install it as npm install typewriter-effect.
Import it import Typewriter from 'typewriter-effect';
and then just use it between html tag like span or h1.
<Typewriter
options={{
strings:["Developer", "Designer", "Content Creater"],
autoStart:true,
delay:75,
loop:true
}}
/>
Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.
This is my component:
import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';
const Image = image => (
<LazyLoad height={200} offset={100} once>
<div
className="image-container"
orientation={image.orientation}>
<img
className="image"
src={image.url}
alt={image.alt}
/>
{'caption' in image &&
<div className="meta">
<p className="caption">{image.caption}</p>
<p className="order">{image.currentNumber}/{image.maxNumber}</p>
</div>
}
</div>
</LazyLoad>
)
export default Image
And in App.js it is called like this:
render() {
return (
<div className="wrapper">
<GalleryTop details={this.state.gallery_top} />
{this.state.images.map((image, index) => <Image key={index} {...image} /> )}
</div>
)
}
But it won't work! Here's the demo environment:
https://gifted-kare-1c0eba.netlify.com/
(Check Network tab in Inspector to see that images are all requested from initial load)
There's also a video here
Any idea about what I am doing wrong?
Thanks in advance,
Morten
I ran into similar issues with the npm package react-lazyload. For one, this package only allows one child per LazyLoad component, so you would have to rearrange your hierarchy to make it work. Secondly, I found some strange behaviors when loading images that were already set within the viewport. The documentation does list import {forceCheck} from 'react-lazyload'; combined with forceCheck(); as a means of manually checking the elements, but I found this inconvenient and insufficient for components that aren't rerendering.
I was able to obtain the exact same functionalities with an easier implementation from the alternative package react-lazy-load. Mind the hyphen. This package also requires node>0.14. More or less, it does the same thing. You can read their documentation here: react-lazy-load
I am using antd and I am seeing this error
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference
I have realized that it is because of mode="horizontal".
I have tried using other components as well and I see this error a lot in antd. Is there any way to fix this issue?
This is my current code
import React from 'react'
import { connect } from 'react-redux';
import { Layout, Menu } from 'antd';
const { Header, Footer, Content } = Layout;
const AddForm = () => {
return (
<div>
{/* // Menu Starts from here */}
<Layout className="layout">
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<div className="site-layout-content">Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</div>
)
};
I'm fixing it by wrapping the commponent using <React.StrictMode>
in my case, the the button inside the form caused that error, so I solve it by
<React.StrictMode>
<Button type="primary" htmlType="submit" className="submit">
Register
</Button>
</React.StrictMode>
There is nothing you can do about it. You have to wait for antd to support Strict Mode. Yet, you can consider contributing to the project.
The semantic team has issued that they are fixing the issue:
See here https://github.com/Semantic-Org/Semantic-UI-React/issues/4050
The best work around I presume is using plain semantic-ui instead of hacking react.
<button className="ui button large primary">click me</button>
for anyone facing this warning, I managed to resolve it by upgrading ant to "antd": "4.20.7", and the issue disappeared. I am using react version 17.0.2.
I think it was resolved in newer release of antd, however, I could not find any reference online.
Hope this helps.
There is no good alternaive for findDOMNode in React 16: https://github.com/ant-design/ant-design/issues/22493
As a workaround, I am adding this at the root file.
I'm suppressing the warning like so:
// eslint-disable-next-line
const consoleError = console.error.bind(console);
// eslint-disable-next-line
console.error = (errObj, ...args) => {
if (
(process.env.NODE_ENV === 'development' && typeof errObj.message === 'string' && args.includes('findDOMNode')
) {
return;
}
consoleError(errObj, ...args);
};
I know this is not a fix, but at least my console is not bloated with findDOMNode messages. Until And-Design fixes this, this will do.
I am trying to embed a twitter timeline of a particular page in a react-bootstrap Panel however I am unable to get it to work.
I am not getting any console logging output which makes me think that I have not gotten it set up properly, however I am unsure as to what the issue is.
I am using react-twitter-widgets to embed the timeline.
My component is as follows:
import React from 'react';
import { Timeline } from 'react-twitter-widgets';
function twitterTimeline() {
return (
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'MetEireann',
}}
options={{
username: 'MetEireann',
height: '400',
}}
onLoad={() => console.log('Timeline is loaded!')}
/>
);
}
export default twitterTimeline;
And then I am using it like so in my react-bootstrap Panel:
import twitterTimeline from '../../components/TwitterTimeline';
.....
<div className="col-lg-4">
<Panel
header={<span>
<i className="fa fa-bar-chart fa-fw" /> Weather Forecast
</span>}
>
<twitterTimeline />
</Panel>
</div>
The component is being loaded in so the issue is obviously with the component itself.
Any help would be greatly appreciated. Thanks in advance.