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
Related
I'm working on these three pages:
App.js has two buttons, when you click on the first button it takes you to page "/quotes", and when you click on the second button it takes you to page "/recommendations". The htmls of all three are working BUT whenever i go to "/quotes" or "/recommendations" the App.js html content AND css content continues to appear (in a very weird and broken way, it looks very bad).
Heres an example:
this is my code:
App.js:
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import QuotePage from './QuotePage.js'
import RecommendationPage from './RecommendationPage.js'
function App() {
return (
<div className="all-page">
<Router>
<Routes>
<Route path="/quotes" element={<QuotePage/>}/>
<Route path="/recommendations" element={<RecommendationPage/>}/>
</Routes>
</Router>
<main className="central-div">
<h2>Taylor's Songs</h2>
<a href="/quotes" className="quote-bttn">
FIND ME A QUOTE
</a>
<a href="/recommendations" className="recommend-bttn">
GET ME A RECOMMENDATION
</a>
</main>
</div>
);
}
export default App;
QuotePage.js:
import './QuotePage.css';
function QuotePage() {
return (
<h1>testing</h1>
);
}
export default QuotePage;
QuotePage.css (I only made this for testing):
body{
background-color: red;
}
RecommendationPage.js:
import './RecommendationPage.css';
function RecommendationPage() {
return (
<div className="test">
<h1>this should be the recommendation page!</h1>
</div>
);
}
export default RecommendationPage;
RecommendationPage.css:
*{
background: rgba(191, 240, 243, 0.94);
}
.test{
background-color: rgb(234, 83, 83);
height: 30px;
}
If there's anything missing here, I'm sorry and would really appreciate if you took a quick look to check if it's here: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master/front
Thank you SO much for anyone who tries to help me!!! <3
I think you're falling for a trap commonly experienced with new people to react: it's not structured like HTML.
While this isn't strictly true, it's helpful to start off as thinking that react has only one screen/page: app.js. You pull other content into this page using components. This is called managing state.
Because you have all of that code in app.js, it will continue to appear. What you need to do is create a separate file (say, "home.js") and put that code in there.
You then need to do the routing with a tool like react-router-dom so that you can change the content on the screen.
Once you've done that, you'll have begin to see how react works.
So:
Move all of that content into a new file called home.js
install react-router-dom with npm
create a new file called navbar.js and create a navigation bar for your site with it
when done, only call navbar.js as a component in app.js
add your pages as routes
You'll need to read up on react-router-dom but it's pretty straightforward
I have a svg image that contains some shadows on several elements and it works nicely in a django project. I now included that in my react.js project and it suddenly drops weird shadows. Why's that and where to fix this in react?
// Landing.js
import Body from './Body'
import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'
import React from "react";
import './Landing.css'
function Landing(props) {
return (
<Body>
<div className="image-wrapper animate__animated animate__fadeInRight"><Logo classname="illu_how" /></div>
</Body>
JS fiddle due to SO character limitation
React.js project:
Django project:
I got it finally... the issue was the import
import { ReactComponent as Logo } from '../../assets/images/illu_how.svg'
that caused the shadow problem for whatever reason.
This works just fine:
import illustration from '../../assets/images/illu_how.svg'
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.
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 :)