for some reason my NextJS page transition with framer-motion doesn't seem to work. I followed many tutorials and did a lot of research and it still doesn't work. Here's my _app.tsx code.
import '../styles/globals.css'
import '../styles/ui.css'
import '../fonts/define.css'
import { AppProps } from 'next/app'
import Layout from '../layouts/dashboard'
import Sidebar from '../components/Sidebar'
import { AnimatePresence, motion } from 'framer-motion'
const App = ({ Component, pageProps }: AppProps) => {
return <main>
<Sidebar/>
<AnimatePresence>
<motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} className="content">
<Component {...pageProps} />
</motion.div>
</AnimatePresence>
</main>
}
export default App
When I switch between routes the transition just doesn't fire. It only fades in on initial load, then opacity: 1 style is applied to .content div and that's it.
Thank you for your help!
I figured it out. I needed to add key attribute to the <motion.div> div. Read more here https://www.framer.com/docs/animate-presence/#unmount-animations
Related
I have a div that wont animate in no matter what i do...this div on only renders if a condition is met
i have tried changing the transtion type to see if it would animate but it just pops in
`
mport React from 'react'
import { useState, useEffect } from 'react'
import sanityClient from '../Client';
import {Link} from 'react-router-dom'
import { motion } from 'framer-motion';
import { useContext } from 'react';
import {variantcontext} from '../variantcontext';
const Models = () => {
const variants = useContext(variantcontext);
console.log(variants)
const [CarModels, SetModels] = useState(null);
useEffect(()=>{
sanityClient.fetch(
`*[_type =="car"]{
_id,
name,
model,
description,
image{
asset->{
_id,
url
}
},
}
`
)
.then((data)=>{
SetModels(data);
console.log(data);
})
.catch(console.error);
},[]);
return (
<motion.div variants={variants} initial='intial' animate='visible' exit='exit' transition={{type:'spring', delay:3}} className='cards flex gap-10'>
{CarModels ? CarModels.map((car, index)=>(
<Link to={'/'+ car.model}><div className='flex flex-col text-center shadow-lg h-52 m-3 bg-slate-100 p-5' key={index}>
<img className='carimages w-56 ' src={car.image.asset.url} alt='M4 Image'/>
<div className='info mt-auto'>
<h1>{car.name}</h1>
<h2>{car.description}</h2>
</div>
</div>
</Link>
)): <p className='m-auto mt-5'>Loading... </p>}
</motion.div>
)
}
export default Models
`above is the code for the entire component...i also tried re-installing framer-motion...but still no luck...i then tried using thesame variants in another component and it worked...i used console.log to make sure that the variants were being passed correctly to the component.
Below snippet is taken from _app.tsx file. I know that having Script component inside the Head component is wrong but this buggy code is blocking the sweetalert library (which I am using in another page to render pop up) from dynamically inserting the CSS rules.
import Head from "next/head";
import Script from "next/script";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<Script
id="branch-io"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `(function(){console.log("hello world")}())`,
}}
/>
</Head>
<Component {...pageProps} />
</>
);
}
For example in this page when I click on the button the popup will be displayed without any CSS applied to it.
import swal from "sweetalert";
export default function Home() {
return (
<button
onClick={() => swal("Hello world!")}
style={{
width: "25vw",
height: "25vh",
color: "white",
backgroundColor: "red",
}}>
Patronus Potter
</button>
);
}
I can resolve the bug by correcting the mistake in the _app.tsx file but my question is why does it happen? Not able to pin point an answer to the question. Any pointers on how to investigate further would be appreciated or Does anybody know why this happens?
im using an old version of a CRUD so i think that some codes aren't working any more, but vscode is not point it like an error, so the page goes on but my content box still empty. could somone help me?
these are 4 codes that i think that should be improved...
first my header that dont show me the props.icon tasks
import './Header.css'
import React from 'react'
export default function props () {
return (
<header className = "header d-none d-sm-flex flex-column">
<h1 className="mt-3">
<i className={`fa fa-${props.icon}`}></i>{props.title}
</h1>
<p className="lead text-muted">{props.subtitle}</p>
</header>
)}
here my main.jsx which my header goes inside by import
import './Main.css'
import React from 'react'
import Header from './Header'
function props () {
return (
<React.Fragment>
<Header {...props}/>
<main className="content container-fluid">
<div className="p-3 mt-3">
{props.children}
</div>
</main>
</React.Fragment>
)
}
export default props
now my app.jsx and app.css wht render my Htmls
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import './App.css'
import React from 'react'
import {HashRouter} from 'react-router-dom'
import Routes from './Routes'
// import Home from '../components/home/Home'
import Logo from '../components/template/Logo'
import Navi from '../components/template/Navi'
import Footer from '../components/template/Footer'
// import props from '../../../frontend2/src/components/template/main'
function Props () {
return(
<HashRouter>
<div className="App">
<Logo />
<Navi/>
<Routes/>
<Footer />
</div>
</HashRouter>
)
}
export default Props
//////////////////////////
:root{
--bg-dark: #1a2f3a;
--logo-height: 100px;
--header-height: 100px;
--aside-width: 225px;
--footer-height: 40px;
--shadow:
0 2px 23px 0 rgba(0, 0, 0, 0.1)
0 2px 49px 0 rgba(0, 0, 0, 0.06)
}
*{
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
/* layout em grid */
.App {
margin: 0px;
display: grid;
grid-template-columns: var(--aside-width) 1fr;
grid-template-rows:
var(--header-height)
1fr
var(--footer-height);
grid-template-areas:
"logo header"
"menu content"
"menu footer";
height: 100vh;
background-color: #f5f5f5;
}
aside.logo{
grid-area: logo;
}
header.header{
grid-area: header;
}
aside.menu-area{
grid-area: menu;
}
main.content{
grid-area: content;
}
footer.footer{
grid-area: footer;
}
then my routes.jsx
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
and finally but not less important my home which own my main and is my / path
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
please help me out here, im stucked search this error by 2 days now, im prety sure that i got a sintax error, if u got this expertise please share
here are some issues from the console but i dont even know from where came this history one, pleasee...
Warning: Please use require("history").createMemoryHistory instead of require("history/createMemoryHistory"). Support for the latter will be removed in the next major release.
stack_frame_overlay_proxy_console # index.js:2178
index.js:2178 Warning: Please use require("history").PathUtils instead of require("history/PathUtils"). Support for the latter will be removed in the next major release.
stack_frame_overlay_proxy_console # index.js:2178
react-dom.development.js:88 Warning: componentWillMount has been renamed, and is not recommended for use. See react-unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.
Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
Please update the following components: HashRouter, Route, Router, Switchnull
I think you might have got a bit mixed up regarding the nature of props in the React framework. Consider reading over the documentation to get more of an overview of how we use them to structure data flow in React applications.
To put it briefly, props are the inputs that components pass to one another in order to populate the UI and update the state of an application. In functional React, we can think of them as the parameters that a function (i.e. component) takes in order to return a given output in JSX.
So when it comes to your code, naming all your component functions Props is not the same as them actually having props available to use. First, a component's parent has to pass it a prop inside the JSX, and then it has to access that prop from the function parameters before it can be used. Here is a simplified example below which will hopefully make the pattern more clear for you:
// App.jsx
function App() {
return (
<div>
<Header title={'someValue'}/>
<MainComponent />
</div>
);
};
// Header.jsx
function Header(props) {
return (
<header>
<h1>{props.title}</h1>
</header>
);
};
I see you were also trying to use props.children which is a slightly different feature and does not work in the same way. The children of a React component are any elements that that component wraps around in the instance that it is declared. The children themselves do not have to passed as props in the usual manner, but they must still be accessed from the function's parameters. In this example, the props.children of MainComponent is the div with the class child:
// App.jsx
function App() {
return (
<div>
<MainComponent>
<div class="child">
</div>
</MainComponent>
</div>
);
};
// MainComponent.jsx
function MainComponent(props) {
return (
<main>
{props.children}
</main>
);
};
Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.
Index.js
import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '#material-ui/core/styles';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}
serviceWorker.unregister();
Component that uses MakeStyles
const navBarStyles = makeStyles((theme) => ({
link: {
margin: theme.spacing(1, 1.5)
}
}));
export default function NavbarComponent() {
const classes = navBarStyles();
return (
<AppBar position="static" elevation={0}>
<Toolbar className="flex-wrap">
<Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
test
</Typography>
<nav>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Features
</Link>
</nav>
</ToolBar>
</AppBar>
)}
Note im using React-Snap with this project so im not sure if that is the reason it is breaking, https://www.npmjs.com/package/react-snap
You can override the MUI styles using theme provider
check theme provider
Or can use classes property in Mui Component. classes
Use sx={{}} property directly in the navbar.
Something like this
<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}>
//Other components
</AppBar>
Strange behaviour, when I try to make an appbar with this code:
import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
export default class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<AppBar title="Title"/>
</div>
</MuiThemeProvider>
);
}
}
The result gives me a stacked appbar:
I have absolutly no idea why it does that and did not find any similar issue. I am running on a fresh Meteor instance with React and Material-UI installed via meteor npm install material-ui
EDIT: After investigation, it seems the problem is that the appbar does not have display:flex. Yet, it is impossible to add it manually with style={{display:'flex'}} (nothing changes).
I know this is old, but in case anyone sees this, the way to do this is to nest a <Toolbar /> inside the <AppBar />.
<AppBar /> docs
One quick and dirty fix: <AppBar title="Title" className="appBar" />
And in main.css:
.appBar{
display:flex;
}
Weird behaviour though.