I have one personal nextjs poject and I need to use slides like "tiktok style". To do so I tried to use the library react-responsive-carousel on vertical mode. Everything seems to be all right in dev mode, but when I try to build it, then it doesn't show me anything. It just disappears. I confirm that the problem is only with the prop axis="vertical" while with default axis="horizontal" everything seems to be all right.
Did anyone had the same issue with this library?
This is my code:
import { NextPage } from "next";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
const Body: NextPage = () => {
return (
<div>
<Carousel
emulateTouch
showArrows={false}
showStatus={false}
showIndicators={false}
showThumbs={false}
width={"100%"}
dynamicHeight
>
<Header />
<AboutMe />
<Projects />
<Footer />
</Carousel>
</div>
);
};
export default Body;
The purpose is to slide my pages vertically like reels or tiktok. I also tried the library react-slick but it has some troubles on mobile devices. It refreshes the page when I slide up.
Do you have any idea on how to fix this? Or do you have another solution?
p.s. I am not getting any error in console
Related
This my code for the a components inside my Next.js 13 with ts, eslint, as well as Chakra UI.
Both images and videos is not working or showing.
I tried the HTML <img> tag as well as importing Image from Chakra. Still the same issue it's not working.
import { Flex } from "#chakra-ui/react";
import Image from 'next/image';
const Navbar:React.FC = () => {
return (
<>
<Flex bg="white" height="44px" padding="6px 12px">
<Flex>
<Image
src={"/public/images/logo.png"} alt='Apex Logo' width="350" height="300"/>
</Flex>
</Flex>
<video src={'/public/images/about video.mp4 '} controls height="100%" width="100%"></video>
</>
)
}
export default Navbar;
I think you dont have to pass /public
src={"/images/logo.png"}
next.js automatically will go inside public folder
Please help me, i don't have web dev experience, and i work in my friend project. I follow a tutorial from youtube about tailwind and react. In the video, he can fill his whole screen using this code:
So i try it in my Dashboard function:
import React from "react";
function Dashboard(props) {
return (
<div>
<main>
<section className=" bg-slate-700 min-h-screen">
hello
</section>
</main>
</div>
);
}
export default Dashboard;
but i get:
This is my project structure looks like:
Why can't i get the same result as the tutorial?
Its because you are using inside a tag which has not to much content in it If you want to apply the color on the full screen you have to use the class "w-screen and min-h-screen" by which that tag gets the full width of the screen and full height
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
I created a react app and it looked good , until I deployed it. After deployment, i cannot see the images, even if react loads them (i see that in the networking tab on chrome). Also the Content type was set right. Also when i go directly to the miage links, chrome renderes them.
This is the component responsable for showing the images:
import "./../styles/firstPart.css";
import logo from "./../images/croped_down.png";
import background from "./../images/background.jpg";
import PreloadImage from "react-preload-image";
import Navbar from "./../components/navbar";
const FirstPart = () => {
return (
<div className="firstPart">
<div className="mainGradient"></div>
<PreloadImage className="background" src={background} />
<PreloadImage className="logo" src={logo} />
<Navbar />
</div>
);
};
export default FirstPart;
Image path is relative and works for local. The same won't be working in prod as it takes absolute page. Check the path of image in Developer Console and see if the path is same as existed
I try to use https://www.npmjs.com/package/react-stars in combination with an icon from FontAwesome. This works well in Chrome and Safari, but the icon is rendered over the span containing the star in Firefox which results in the star not being clickable. There is a small area above and under the star that can be clicked in Firefox.
What can I do to fix this?
import React, {Component} from 'react';
import ReactStars from 'react-stars'
import '../node_modules/font-awesome/css/font-awesome.min.css';
class App extends Component {
render() {
return (
<div className="App">
<ReactStars
size={50}
half={false}
onChange={(newRating) => {
console.log(newRating)
}}
char={<i className="fa fa-star" aria-hidden="true"></i>}
/>
</div>
);
}
}
export default App;
Based on their documentation https://www.npmjs.com/package/react-stars#api they expect char to be string. So i guess thats the problem that its not working as expected when using elements.
I search and found this library react-rating which seems pretty cool and ease to use.
https://www.npmjs.com/package/react-rating
You can find their examples here:
http://dreyescat.github.io/react-rating/
You can add font-awesome icons just as easy as:
<Rating
emptySymbol="fa fa-star-o"
fullSymbol="fa fa-star"
fractions={2}
/>