Fairly new to react, so I'm wondering if anyone can give me a sort of step-by-step rundown on how I can use AOS? I already did yarn add aos. Thanks!!
if you are referring to the AOS scroll library you have to import it and call it in the App.js file then call the init function :
import Aos from 'aos';
function App() {
Aos.init();
return (
<div className="App">
</div>
);
}
export default App;
and for each element you want to animate you add one of the aos class names for example:
<div data-aos="fade-down"> im a div </div>
you can find more options for animations in the AOS documentation: https://michalsnik.github.io/aos/
UPDATE: you also need to import the AOS CSS like so:
import 'aos/dist/aos.css';
Related
I've found a online demo here:https://codepen.io/seven-phases-max/pen/dPYxzR
want to use it in my React project, but somehow it is not working with React.
the less file:
#primaryColor: #006699;
.lessTest {
width: 100px;
height:100px;
background-color:#primaryColor;
}
Js file:
import React, { useEffect } from 'react';
import less from 'less'
function App() {
useEffect(() => {
less.modifyVars({ primaryColor: "#ffe4e1" });
less.refreshStyles();
}, [])
return (
<div className='App'>
<div className='lessTest'>213</div>
</div>
);
}
export default App;
it seems modifyVars not working.
I've create a demo to explane :
https://stackblitz.com/edit/react-twpmxg?file=src/App.js
Your first question: Where does the less instance come from?
In the project settings of the codepen, some javascript libraries are added, including less.js:
How do I use less.modifyVars in my React project?
First, you need to add less to your project (assuming you haven't already): Using .less files with React
Next, add less.js to your React app's /public/index.html file:
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
Finally, reference less.modifyVars like so:
//Component.js(x)
window.less.modifyVars({ "cool-variable": red });
window.less.refreshStyles();
note: solution not tested
Currently, I am trying to implement a keen-slider library(https://www.npmjs.com/package/keen-slider).
For installation, we need to add import 'keen-slider/keen-slider.min.css'.
In that case, the keen slider CSS is added to global, as you know.
The CSS is included globally in the page markup. From my perspective, it should be included only on pages where the slider is used
Is there any solution to solve this problem?
I'm not sure to understand the issue. You can always choose to import a file (CSS or whichever format you want) globally or in a specific file.
For your use-case, as soon as you install the dependency (npm install keen-slider --save), you will be able to import the minified CSS into the needed component. For example:
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'
export function IndexPage(){
const [sliderRef, slider] = useKeenSlider()
return <section className="slider-wrapper">
<div ref={sliderRef}>
<div class="keen-slider__slide">1</div>
<div class="keen-slider__slide">2</div>
<div class="keen-slider__slide">3</div>
</div>
</section>
}
With this approach, you will be only importing the keen-slider.min.css in the IndexPage.
I think, you can try to lazily load your component via:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Also you should do import 'keen-slider/keen-slider.min.css' inside of OtherComponent.
More info here: https://reactjs.org/docs/code-splitting.html
I am trying to insttall https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, I think maybe there are 2 motives for not work.
1- In my html inside body tag this tag appears:
<noscript>You need to enable JavaScript to run this app.</noscript>
2- When I hover the module that I install via NPM, vscode show me this:
I am using react hooks, here I found information of how to use it https://github.com/wagerfield/parallax/issues/167
And also here on demo samples
https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html
I have literally hours trying to know whats the problem!
This is my jsx code:
import React, {useEffect, useRef} from 'react';
// #ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';
const Home = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div id="container">
<div id="scene" ref={sceneEl}>
<div dataDepth="1.00"><img src={Layer1} /></div>
<div dataDepth="0.80"><img src={Layer2} /></div>
<div dataDepth="0.60"><img src={Layer3} /></div>
<div dataDepth="0.40"><img src={Layer4} /></div>
<div dataDepth="0.20"><img src={Layer5} /></div>
<div dataDepth="0.00"><img src={Layer6} /></div>
</div>
</div>
)
}
export default Home;
In my browser I can see this:
But it doesn't hace the "parallax" effect 😥.
That's because you are using TS and there is no types declaration on the side of the library. I think you can simply fix this doing exactly what the console shows.
I you don't have a .d.ts file, just create one and add declare module 'parallax-js';
After this, if you didn't have the file yet, add it to the include property of your tsconfig.json file and you should be fine.
I am trying to pass a locally stored image name to a component via props. The problem is
<img src={require(`../assets/img/${iconName}.svg`)} />
is not working. I have bootstrapped the project using create-react-app. The component looks like this:
import React from 'react';
import best from '../../assets/img/best.svg';
import cashback from '../../assets/img/cashback.svg';
import shopping from '../../assets/img/shopping.svg';
const Card = ({iconName}) => {
return (
<>
<img alt="icon" src={require(`../assets/img/${iconName}.svg`)} />
</>
);
};
export default Card;
SVGs are failing to load. Even if I write something like:
<img src={require('../assets/img/best.svg')} />
<img src={`${iconName}`} />
it doesn't work. Can this be an issue with webpack loader in CRA?
Because those are SVGs, I imagine, there's a static number of images you might want to display.
At this point you might need to import them all in the beginning. Depending on the tools that you're using around react the dynamic loading of data may or may not work. Your approach definitely would not work for instance with Next.JS (a framework around react).
so I would suggest just loading them all, putting into a map and using that instead of the dynamic require.
import React from 'react';
import best from '../../assets/img/best.svg';
import cashback from '../../assets/img/cashback.svg';
import shopping from '../../assets/img/shopping.svg';
const icons = Object.freeze({best, cashback, shopping});
const Card = ({iconName}) => (<img alt="icon" src={icons[iconName]} />);
export default Card;
This is the structure that I'm trying to mimic (from react-boilerplate):
component
|Footer
|style.css
|Footer.js
Inside Footer.js the styles are imported quite elegantly this way:
import React from 'react';
import A from 'components/A';
import styles from './styles.css';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>This project is licensed under the MIT license.</p>
</section>
<section>
<p>Made with love by Max Stoiber.</p>
</section>
</footer>
);
}
export default Footer;
className(s) are then generated for the footer element to apply the style to that specific component.
But when I try to mimic this structure in my project it's not working. The imported styles object is always empty. I suspect I might be lacking some dependency but I can't figure out what it might be.
I would like to know which dependency I might be lacking and/or webpack configuration I need to do in order to apply the same structure to my project.
You may config your webpack like this
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .
Quite not sure about it, but it seems you are looking for styles.css with javascript
import styles from './styles.css';
and you have a style.cssin your directory :)