i want to print the model box - reactjs

i want to print the model box of the page but without the print button itself. I have tried this code but it didn't work. I am new to react . help.
the code is as below:
import React from "react";
import "./Bill.css";
import logo from "./images/logo.png";
import { Link, useHistory } from "react-router-dom";
import ClientDashboard from "./ClientDashboard";
import BillTable from "./BillTable";
function Bill() {
const history = useHistory();
const logout = (e) => {
localStorage.removeItem("token");
history.push("/");
};
if (!localStorage.getItem("token")) {
history.push("/");
}
return (
<div className="modal__bill">
<div className="bill__navbar">
<Link to="/clientdashboard" className="header__link">
<img className="navbar__logo" src={logo} alt="logo" />
</Link>
</div>
<div className="box">
<BillTable />
<button className="print__button" onClick={() => window.print()}>
Print
</button>
</div>
</div>
);
}
export default Bill;


Have you tried to hide the button by css?
How do I hide an element when printing a web page?
In your case you can add
#media print {
.print__button {
display: none !important;
}
}

Related

How to make this image clickable in React?

I've tried using <a> and <Link to=""> as well but the image is not clickable. Now I've used click events still the image is not clickable. How to make this image clickable and redirect to a webpage?
import '../index.css';
import LinkedinLogo from '../assets/linkedin.png';
// import { Link } from "react-router-dom";
const SocialMedia = () => {
const link= () => {
window.location.href = "https://www.linkedin.com/";
}
return (
<div className="bottom absolute">
{/* <Link to="https://www.linkedin.com/"> */}
<img src={LinkedinLogo} alt="Linkedin logo" onClick={link}/>
{/* </Link> */}
</div>
);
}
export default SocialMedia;

Your code is workable.
What's problem did you get?
export default function App() {
const link = () => {
window.location.href = 'https://www.linkedin.com/'
}
return (
<div>
<div className='bottom absolute'>
<img
alt='Linkedin logo'
onClick={link}
src='https://picsum.photos/200/300'
/>
</div>
</div>
)
}

I was creating a carousel which displays trending cryptoCurrencys using AliceCarousel but the output is not correct

picture of the output https://i.stack.imgur.com/5kxvb.png
code of the carousel
import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import { Link } from 'react-router-dom';
import UseAxios from '../hooks/UseAxios'
import "./Trending.css";
const Trending = () => {
const { response } = UseAxios("search/trending");
return (
{response && response.coins.map(coin => {
return <div className='flex slide' key={coin.item.coin_id}>
<Link to={`/coin/${coin.item.id}`}>
<div>
<AliceCarousel
mouseTracking
infinite
autoPlayInterval={1000}
animationDuration={1500}
disableButtonsControls
autoPlay
>
<img src={coin.item.large} className="mt-0 relative top-30 img" />
<p key={coin.item.coin_id} className="name"> {coin.item.name} </p>
</AliceCarousel>
</div>
</Link>
</div>
})}
</div>
)
}
export default Trending;
note:- library being used is AliceCarousel.
can someone please help me fix the carousel.

How to display Splash screen in reactjs

I have two codes for Splash.jsx and one for homepage.jsx. All I want is to display the Splash screen once the Homepage is not in use, but I have no idea how to integrate the splash screen with the Homepage and set the timer, so the splash screen is displayed once I don't use Homepage. It would be great to help me out with showing the splash screen once the Homepage is not in use.
Homepage.jsx
import React from 'react';
import Card from '../Card/Card'
import img2 from '../../Assets/AutoLoan.png'
import img3 from '../../Assets/KYC.png'
import img4 from '../../Assets/VIsa.png'
import './Homepage.css'
import {
Swiper,
SwiperSlide
}
from 'swiper/react';
import 'swiper/css';
import { Navigation } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Link } from 'react-router-dom';
const Homepage= () => {
return (
<div>
<div className="background">
<div className="welcome__heading">
<h1>Welcome!!</h1>
</div>
<div className= "customer__support">
<h2>We are here for customer service.</h2>
</div >
<div className="swiper_container">
<Swiper
modules={[Navigation]}
navigation
spaceBetween={10}
slidesPerView={3}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
loop={true}
>
<SwiperSlide>
<Link to="AutoLoan">
<Card imgsrc={img2} alt="AutoLoan" title="Auto Loan" />
</Link>
</SwiperSlide>
<SwiperSlide>
<Link to="KYC">
<Card imgsrc={img3} alt="KYC" title="KYC Form" />
</Link>
</SwiperSlide>
<SwiperSlide>
<Link to="Debit">
<Card imgsrc={img4} alt="Visa" title="Visa Debit Card" />
</Link>
</SwiperSlide>
</Swiper>
</div>
<div ClassName="button">
<Link to = "Location">
<button className = "btn1">
<i className = "fa fa-map"></i>
</button>
</Link>
<Link to = "Calculator">
<button className = "btn2">
<i className = "fa fa-calculator"></i>
</button>
</Link>
</div>
</div>
</div>
);
}
export default Homepage
Splash.jsx
import React from 'react';
import './Splash.css'
import img2 from '../../Assets/Header.png'
import img8 from '../../Assets/hand.svg'
const Splash = () => {
return (
<div>
<div className="bg2">
<div className="header__body">
<div className="header__left">
<div className="header__left__image">
<img src = {img2} alt="Header"/>
</div>
<h1 >Laxmi Bank</h1>
</div>
<div className="header__right">
<h1 >23℃/11:00AM</h1>
</div>
</div>
</div>
<div className="splash">
<h1>TAP HERE</h1>
<div className= "blink">
<img src = {img8} alt = "taphand" />
</div>
</div>
</div>
);
};
export default Splash;
The splash screen should appear after 2 sec of not using Homepage, and once we tap on the splash screen the Homepage should appear again and once it is idle the splash screen should appear and vice versa. and I have no idea how to set the timer and control this component. So, it would be good if someone would help me out.

You need to create a idle timer to trigger after inactivity of the
user in Homepage
When setTimeout triggers the callback it will mount the Splash
Once Splash is mounted, click on the Link tag says TAP HERE back to redirect to home
Homepage -
(path = "/home")
import React,{ useEffect } from "react";
import { useNavigate } from "react-router-dom";
const Homepage= () => {
let navigate = useNavigate();
useEffect(() => {
//Idle timer
let timerId;
const resetTimer = () => {
clearTimeout(timerId);
timerId = setTimeout(() => {
navigate("/splash");
}, 30 * 1000); //30 sec idle time
};
document.addEventListener("keydown", resetTimer);
document.addEventListener("mousemove", resetTimer);
return () => {
clearTimeout(timerId);
document.removeEventListener("keydown", resetTimer);
document.removeEventListener("mousemove", resetTimer);
};
}, []);
}
Splash - (path = "/splash")
const Splash = () => {
return <div>
...
<Link to='/home'>TAP HERE</Link>
</div>
}

You can use react-idle-timer package. A working solution exists here

'withRouter' is not exported from 'react-router-dom'

Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'.
My code like, also I have installed react-router-dom an react-route and I have respin the app 10 time now
import React from 'react';
import {withRouter} from 'react-router-dom';
import './menu-item.scss';
const MenuItem = ({ title, imageUrl, size, history }) => (
<div className={`${size} menu-item`}>
<div
className='background-image'
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className='content'>
<h1 className='title'>{title.toUpperCase()}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
);
export default withRouter(MenuItem);

If you accidentally installed react-router-dom v6 then the withRouter HOC no longer exists. Either revert back to v5 (run npm install -s react-router-dom#5), or roll your own custom withRouter HOC to inject the props you need or convert the components to function components and use the React hooks.
Create custom withRouter Higher Order Component
From the FAQ: What happened to withRouter I need it
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router={{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
Convert to function component
There is now also no longer a history object to use, it was replaced by a navigate function accessed via the useNavigate hook. It's not clear where history was being used previously, but if you need to imperatively navigate the following is how you access the navigation. If staying with v6 then the following is how to access the navigate function.
import React from 'react';
import { useNavigate } from 'react-router-dom';
import './menu-item.scss';
const MenuItem = ({ title, imageUrl, size }) => {
const navigate = useNavigate();
// navigate("/targetPath")
return (
<div className={`${size} menu-item`}>
<div
className='background-image'
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className='content'>
<h1 className='title'>{title.toUpperCase()}</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
)
};
export default MenuItem;

You can use useLocation hook and destructure 'pathname' property from it to make the navigated link in the onClick() function dynamic.
Here's a sample of the code that worked for me:
import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, linkUrl, match }) => {
let navigate = useNavigate();
// destructured "pathname" property from useLocation()
let { pathname } = useLocation();
// consoloe.log(pathname)
return (
<div className={`${size} menu-item`} onClick={() => navigate(`${pathname}${linkUrl}`)}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
);
};
export default MenuItem;

thanks to Drew Reese -great shout-, and similar to Switch ( will throw the same error ) here is the downgrade command, just make sure you are in the right directory
npm install react-router-dom#5.0.0

try this it worked for me
import React from "react";
import { useNavigate } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, linkUrl, match }) => {
const navigate = useNavigate();
return (
<div className={`${size} menu-item`} onClick={() => navigate(`hats`)}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
></div>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
);
};
export default MenuItem;

in menu-item.component.jsx you can use the useNavigate just like this one
import React from "react";
import { useNavigate } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, linkUrl, match }) => {
let navigate = useNavigate();
return (
<div className={`${size} menu-item`} onClick={() => navigate(`${linkUrl}`)}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
></div>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
);
};
export default MenuItem;
Also, in App.js you should import Routes and Route from react-router-dom and make your code like this:
import React from "react";
import { Routes, Route } from "react-router-dom";
import "./App.css";
import HomePage from "./pages/homepage/homepage.component";
const HatsPage = () => (
<div>
<h1>Hats page</h1>
</div>
);
function App() {
return (
<div>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route path="/hats" element={<HatsPage />} />
</Routes>
</div>
);
}
export default App;
As for me, this works.

How to close sidebar when clicking link?

I am trying to get my sidebar to close when I click on any of the menu options. I was able to get the sidebar to close/open whenever I click on the burger icon, but not sure if I am supposed to make my sidebar component a class and have its own state. Below are my navigation and sidebar components.
import React from 'react';
import { Link } from 'react-router-dom';
import { ReactComponent as MenuIcon } from '../../assets/menu.svg';
import { ReactComponent as CloseIcon } from '../../assets/x-mark.svg';
import './navigation.styles.scss';
import Sidebar from '../sidebar/sidebar.component';
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
isSidebarHidden: true
};
this.handleSidebar = this.handleSidebar.bind(this);
}
handleSidebar() {
this.setState({ isSidebarHidden: !this.state.isSidebarHidden });
}
render() {
const { isSidebarHidden } = this.state;
return (
<div className='navigation'>
<div className='logo-container'>
<Link className='logo' to='/'>
NAME
</Link>
</div>
<div className='navigation-options'>
<Link className='option' to='/projects'>
PROJECTS
</Link>
<Link className='option' to='contact'>
CONTACT
</Link>
{isSidebarHidden ? (
<MenuIcon className='menu-icon' onClick={this.handleSidebar} />
) : (
<CloseIcon className='menu-icon' onClick={this.handleSidebar} />
)}
</div>
{isSidebarHidden ? null : <Sidebar />}
</div>
);
}
}
export default Navigation;
import React from 'react';
import { Link } from 'react-router-dom';
import './sidebar.styles.scss';
const Sidebar = () => (
<div className='sidebar'>
<Link className='sidebar-option' to='/projects'>
PROJECS
</Link>
<Link className='sidebar-option' to='/contact'>
CONTACT
</Link>
</div>
);
export default Sidebar;

You could create a method to hide the sidebar and pass it to the Sidebar component, so it executes when you click the links.
const Sidebar = ({hideSidebar}) => (
<div className='sidebar'>
<Link onClick={hideSidebar} className='sidebar-option' to='/projects'>
PROJECS
</Link>
<Link onClick={hideSidebar} className='sidebar-option' to='/contact'>
CONTACT
</Link>
</div>
);
Or you could also execute it every time you move to a different path listening to the browser history with react-router.
import { browserHistory } from 'react-router';
browserHistory.listen(handleRouteChange);

I suggest controlling the component with props instead of using if statement inside the parent component.
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import './sidebar.styles.scss';
const Sidebar = ({ visibility, setVisibility }) => {
if (visibility) {
return (
<div className='sidebar'>
<Link className='sidebar-option' to='/projects' onClick={() => setVisibility()}>
PROJECS
</Link>
<Link className='sidebar-option' to='/contact' onClick={() => setVisibility()}>
CONTACT
</Link>
</div>
)
}
return null
};
export default Sidebar;
As you see, I passed setVisibility prop to onClick callback on the sidebar links and checked if visibility is true then return the sidebar contents. So in this step, we just need to pass this.handleSidebar to setVisibility prop and the parent state isSidebarHidden to the visibility prop.
import React from 'react';
import { Link } from 'react-router-dom';
import { ReactComponent as MenuIcon } from '../../assets/menu.svg';
import { ReactComponent as CloseIcon } from '../../assets/x-mark.svg';
import './navigation.styles.scss';
import Sidebar from '../sidebar/sidebar.component';
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = { isSidebarHidden: true };
this.handleSidebar = this.handleSidebar.bind(this);
}
handleSidebar() {
this.setState({ isSidebarHidden: !this.state.isSidebarHidden });
}
render() {
const { isSidebarHidden } = this.state;
return (
<div className='navigation'>
<div className='logo-container'>
<Link className='logo' to='/'>
NAME
</Link>
</div>
<div className='navigation-options'>
<Link className='option' to='/projects'>
PROJECTS
</Link>
<Link className='option' to='contact'>
CONTACT
</Link>
{isSidebarHidden ? (
<MenuIcon className='menu-icon' onClick={this.handleSidebar} />
) : (
<CloseIcon className='menu-icon' onClick={this.handleSidebar} />
)}
</div>
<Sidebar visibility={isSidebarHidden} setVisibility={this.handleSidebar} />
</div>
);
}
}
export default Navigation;
Then it works.

For the people using bootstrap offcanvas as a sidebar there is a very easy way to do it using only bootstrap and with no JavaScript.
<li data-bs-dismiss="offcanvas">Skills</li>
The above code represent li as one of the item in the sidebar and on upon clicking it takes you to skill section and also closes as it is in dismiss state.

Resources