Can't seem to get the alert to disappear in 2 seconds. The error message prop pulls from the state and it's generating correctly. Also other implementations are welcome, doesn't have to be using this method. Let me know if more information is needed. Thanks!
In mystyle.module.css file:
#hideMe {
-moz-animation: cssAnimation 0s ease-in 2s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 2s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 2s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 2s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
In React file:
import hideMe from './mystyle.module.css';
.
.
.
render() {
return (
<div className={s.root}>
<Row>
<Col md={12} sm={12} xs={12}>
{this.props.errorMessage && (
<Alert type={hideMe.hideMe} size="sm" color="danger">
{this.props.errorMessage}
</Alert>
)}
{this.props.successMessage && (
<Alert id="hideMe" size="sm" color="success">
{this.props.successMessage}
</Alert>
)}
<Widget>
<FormGroup>
<Label for="input-userlogin">User Login</Label>
{!this.state.changingLogin ? <Input
id="input-userlogin"
type="text"
placeholder="User Login"
value={this.state.userLogin}
onChange={this.changeUserLogin}
/> : <div><h6>{this.state.userLogin}</h6></div> }
</FormGroup>
<div className="d-flex justify-content-end">
<ButtonGroup>
<Link to="/app/users"><Button color="default">Cancel</Button></Link>
{this.props.selectedUser ?
<Button color="danger" onClick={this.doUpdateCreateLogin}>
{this.props.isCreated ? 'Updating...' : 'Update'}
</Button> :
<Button color="danger" type="submit">
{this.props.isCreating ? 'Creating...' : 'Create'}
</Button>}
</ButtonGroup>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
function mapStateToProps(state) {
return {
selectedUser: state.users.selectedUser,
errorMessage: state.users.message,
isFetching: state.users.isFetching,
};
}
An alternative, very simple implementation is to just work with a state that determines the visibility of the component and changing its value with a timeout in a useEffect hook (or the componentDidMount method for class components).
const { useState, useEffect } = React;
const Alert = () => {
const [show, setShow] = useState(true);
useEffect(() => {
setTimeout(() => {
setShow(false);
}, 3000);
}, []);
return show && <div>I will be hidden after 3s</div>;
};
const App = () => {
return <Alert />;
};
// Render it
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Related
I want to make a reusable modal component with transitions, but CSSTransition doesn't work, i have been trying for many ways but nothing works. Maybe is createPortal, or useContext.
I am interested in creating a single modal component for several pages, and only place the transition once so that it is reusable
Route
const App = () => {
const initialState = useInicialState();
return (
<AppContext.Provider value={initialState}>
<AdminProvider>
<Routes>
<Route exact path="/" element={<Login />} />
<Route element={<Layout />}>
<Route exact path="/dashboard" element={<Dashboard />} />
<Route exact path="/areas" element={<Areas />} />
<Route path="*" element={<NotFound/>} />
</Route>
</Routes>
</AdminProvider>
</AppContext.Provider>
);
};
export default App;
Hook:
const useInicialState= ()=>{
const [openModal, setOpenModal] = useState(false);
return{
openModal,
setOpenModal
}
}
export default useInicialState;
Context:
import React from "react";
const AppContext = React.createContext({});
export default AppContext;
Modal Component:
const Modal = ({children}) => {
const {openModal, setOpenModal}= useContext(AppContext)
const nodeRef = useRef(null);
console.log(openModal)
const handleClose = ()=>{
setOpenModal(false)
}
return (
ReactDOM.createPortal(
<div className="modal-background">
<CSSTransition
in={openModal}
timeout={500}
classNames="modal"
unmountOnExit
nodeRef={nodeRef}
>
<div className="modal" ref={nodeRef}>
<button onClick={handleClose} className="button-close">
x
</button>
{children}
</div>
</CSSTransition>
</div>,
document.getElementById('modal')
)
);
}
export default Modal
Page:
const Areas = () => {
const [token] = useContext(AdminContext);
const {openModal, setOpenModal} = useContext(AppContext);
const [sectors, setSectors] = useState([]);
const getSectors = async ()=>{
const requestOptions = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
};
const response = await fetch("/api/sector/list", requestOptions);
if(!response.ok){
}else{
const data = await response.json();
setSectors(data);
}
};
useEffect(() => {
getSectors();
}, [])
const handleModal= ()=>{
setOpenModal(!openModal)
}
return (
<>
{openModal && (
<Modal>
<p>esto es una prueba</p>
</Modal>
)}
<button className="button-create" onClick={handleModal}>Crear área</button>
<table className="styled-table">
<thead>
<tr>
<th>Nombre</th>
<th>Descripción</th>
<th>Modificar/borrar</th>
<th>Administrar personal</th>
<th>Administrar aspectos</th>
</tr>
</thead>
<tbody>
{sectors.map((sector)=>(
<tr key={sector.sector_name}>
<td>{sector.sector_name}</td>
<td>{sector.sector_description}</td>
<td>
<img src={edit} alt="" />
<img src={garbage} alt="" />
</td>
<td>
<img src={personal} alt="" />
</td>
<td>
<img src={drop} alt="" />
</td>
</tr>
))}
</tbody>
</table>
</>
)
}
export default Areas;
and last Css:
.modal-background{
display:block;
position: fixed;
z-index: 1;
padding-top:100px;
left: 0;
top: 0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba($color: #000000, $alpha: 0.5);
}
.button-close{
position: absolute;
left:200px;
}
.modal{
position:relative;
background-color:white;
margin:auto;
margin-left:267px;
padding:0;
border:none;
border-radius:10px;
}
.modal-enter{
opacity:0;
transform:scale(0);
}
.modal-enter-active{
opacity:1;
transform: scale(1);
transition: opacity 500ms, transform 500ms;
}
.modal-exit{
opacity: 1;
}
.modal-exit-active{
opacity:0;
transform: scale(0);
transition: opacity 500ms, transform 500ms;
}
Find myself the solution, thge problem was by the conditional for CSStransition.
{openModal && (
<Modal>
<p>esto es una prueba</p>
</Modal>
)}
with out this condition work fine:
<Modal>
<p>esto es una prueba</p>
</Modal>
I just want to add a fade in animation to next index. i found a package called "react transition group" but all tutorials were based on class components or redux I didn't understand anything.
const AboutTestimonials = () => {
const [index, setIndex] = useState<any>(0);
const [data] = useState(AddTestimonial);
const current = data[index];
return (
<div className="testimonials__container">
<div className="testimonials__description">
<h3>TESTIMONIALS</h3>
<p>{current.quote}</p>
<h5 className="author__testimonials">{current.postedby}</h5>
<h6 className="job__testimonials">{current.profession}</h6>
</div>
<div className="testimonials__pagination">
<Image
src={leftarrow}
alt="arrow"
onClick={() => setIndex(index > 0 ? index - 1 : index)}
className="pagination__arrows"
/>
<p>{index + 1} / 5</p>
<Image
src={rightarrow}
alt="arrow"
onClick={() => setIndex(index < 4 ? index + 1 : index)}
className="pagination__arrows"
/>
</div>
SwitchTransition waits for the old child to exit then render the new child as mentioned in the react transition group website.
there are two modes:
in-out
out-in
the important factor is changing the key prop of the child component.child component could be CSSTransition or Transition.if you want the transition changes simultaneously you can use the TransitionGroup.
side note: if you want to use the AddTestimonial in your component and you don't want to change the state (I noticed there is no second argument for setting the data), there is no need to declare a useState.it is much better to set AddTestimonial as a prop on AboutTestimonials component
import { CSSTransition, SwitchTransition } from 'react-transition-group';
const AboutTestimonials = () => {
const [index, setIndex] = useState<any>(0);
const [data] = useState(AddTestimonial);
const current = data[index];
return (
<div className="testimonials__container">
<div className="testimonials__description">
<h3>TESTIMONIALS</h3>
<SwitchTransition mode={'out-in'} >
<CSSTransition
key={index}
timeout={300}
classNames="fade"
>
<>
<p>{current.quote}</p>
<h5 className="author__testimonials">{current.postedby}</h5>
<h6 className="job__testimonials">{current.profession}</h6>
</>
</CSSTransition>
</SwitchTransition>
</div>
<div className="testimonials__pagination">
<Image
src={leftarrow}
alt="arrow"
onClick={() => setIndex(index > 0 ? index - 1 : index)}
className="pagination__arrows"
/>
<p>{index + 1} / 5</p>
<Image
src={rightarrow}
alt="arrow"
onClick={() => setIndex(index < 4 ? index + 1 : index)}
className="pagination__arrows"
/>
</div>
)}
css:
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}
I'm attempting to use useState to alter the display type in my styled components. When attempting to use my code the display type is not altered and my variable "displayType" is undefined.
I've attempted altering what my setStyle() function returns, but I am starting to see this is a larger problem that I'd like to understand better.
When I print the value to the console in index.js everything works fine. However I just get undefined when I try to use displayType in StoreElements.js
src/pages/store.js
const [displayType, setDisplayType] = useState("none");
const setStyle = (displayType) => {
setDisplayType(displayType);
console.log(displayType)
};
const [isOpen, setIsOpen] = useState(false)
const toggle = () => {
setIsOpen(!isOpen)
}
return (
<div>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle} />
<Store setStyle={setStyle} displayType={displayType}></Store>
<Footer />
</div>
)
}
export default StorePage
src/store/index.js
const Store = ({displayType, setStyle}) => {
return (
<>
<AboutBg style={{ backgroundImage: `url(${BgPic})` }}></AboutBg>
<StoreContainer>
<StoreWrapper>
<Title>Store</Title>
<ItemsContainer>
<ItemWrapper
onMouseEnter={() => setStyle("hoodie")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/about">
<MerchImg src={frontHoodie}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Hoodie text</MerchText>
<HoodiePriceText>price</HoodiePriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("sweats")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/tournaments">
<MerchImg src={frontSweats}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Sweats text</MerchText>
<SweatsPriceText displayType={displayType}>
price
</SweatsPriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("shirt")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/">
<MerchImg src={frontShirt}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Shirt text</MerchText>
<ShirtPriceText>price</ShirtPriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("mousepad")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/">
<MerchImg src={mousepadFront}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>mouspad text</MerchText>
<MousepadPriceText>price</MousepadPriceText>
</TextWrapper>
</ItemWrapper>
</ItemsContainer>
</StoreWrapper>
</StoreContainer>
<div>
{listItems}
{cartItems}
Total: ${cartTotal}
{cartItems.length}
</div>
</>
);
};
export default Store;
src/store/StoreElements.js
export const HoodiePriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
display: ${({ displayType }) => {
if (displayType === "hoodie") {
console.log("working");
return "block";
} else {
console.log({displayType})
return "none";
}
}};
`;
export const ShirtPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
export const MousepadPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
export const SweatsPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
In your styled component usage, you should bind the property displayType:
<HoodiePriceText displayType={displayType}>price</HoodiePriceText>
Thus, you should able get displayType in styled component!
setDisplayType is triggering the state change and causes a re-render of the function. It does not modify the value of the variable displayType. The value displayType is still undefined directly after calling setDisplayType, because it only gets its value after the function re-runs the useState-line.
const [displayType, setDisplayType] = useState("none");
// displayType can only get a new value here
I have a problem with React transitions group. For some reason, the fade in and out is not working on Router Switch. I have read the documentation and implemented it inside my App.
Don't know what is wrong with my code.
My React code:
const App = () => (
<Router>
<Menu />
<TransitionGroup>
<CSSTransition
timeout={{ enter: 300, exit: 300 }}
classNames={'fade'}>
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
component={route.component}
/>
))}
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
);
export default App;
Css code:
.fade-enter {
opacity: 0.01;
&.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
}
.fade-exit {
opacity: 1;
&-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
}
Nevermind, forgot to wrap it:
<Route render={({ location }) => (
Thanks.
In my project appear works well. However, I can not understand why enter and leave do not work.
The same happens with routers. When the page loads, the animation works. But when you switch to another page, everything happens abruptly.
What could be the problem?
import React, { Component } from "react";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import InputMask from 'react-input-mask';
import Close from '../images/cancel.svg';
import './fonts.css';
import './Modal.css';
class Modal extends Component {
state = {
email: '',
name: '',
phone: '',
message: ''
};
handleSubmit = (e) => {
e.preventDefault();
console.log('form is submitted. Email value is ', this.state);
e.target.reset();
};
handleInputChange = (e) => {
this.setState({[e.target.name]: e.target.value})
};
onClose = (e) => {
this.props.onClose && this.props.onClose(e);
};
render() {
if( !this.props.show ) {
return null;
}
return (
<div>
{this.props.children}
<ReactCSSTransitionGroup
transitionName="OverlayTransition"
//transitionAppear={true}
//transitionAppearTimeout={1300}
transitionEnterTimeout={1300}
transitionLeaveTimeout={1300}
>
<div className="Modal-block-wrap" onClick={(e) => { this.onClose(e) }}> </div>
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup
transitionName="WrapTransition"
transitionAppear={true}
transitionAppearTimeout={700}
>
<div className="Modal-block-wrapper"> </div>
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup
transitionName="ModalTransition"
transitionAppear={true}
transitionAppearTimeout={1300}
>
<div className="Modal-block">
<button className="Modal-block-close" onClick={(e) => { this.onClose(e) }} type="button">
<img src={Close} alt="close"/>
</button>
<div className="Modal-form">
<form onSubmit={this.handleSubmit} >
<h2>Some Text</h2>
<input
type="text"
name="name"
placeholder="Имя"
value={this.state.name}
onChange={this.handleInputChange}
required
/>
<input
name="email"
type="email"
placeholder="E-mail"
value={this.state.email}
onChange={this.handleInputChange}
required
/>
<InputMask
name="phone"
type="tel"
mask="+38(999)999-99-99"
placeholder="Телефон"
maskChar=" "
value={this.state.phone}
onChange={this.handleInputChange}
required
/>
<input
name="message"
type="text"
placeholder="Сообщение"
value={this.state.message}
onChange={this.handleInputChange}
/>
<button>Отправить</button>
</form>
</div>
</div>
</ReactCSSTransitionGroup>
</div>
);
}
}
export default Modal;
My css style
.OverlayTransition-appear {
opacity: 0.01;
}
.OverlayTransition-appear.OverlayTransition-appear-active {
opacity: 1;
transition: all 0.4s ease;
transition-delay: 0.9s;
}
.WrapTransition-appear {
opacity: 0.7;
transform: translateY(100%);
}
.WrapTransition-appear.WrapTransition-appear-active {
opacity: 1;
transform: translateY(0);
transition: all 0.7s ease;
}
.ModalTransition-appear {
opacity: 0.8;
transform: translateX(100%);
}
.ModalTransition-appear.ModalTransition-appear-active {
opacity: 1;
transform: translateX(0);
transition: all 0.7s ease;
transition-delay: 0.6s;
}