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'
Related
I'm a beginner who's trying to make a simple website using React JS.
Here's my App.js file and the other component which is not rendering.
All the other components are rendering fine,Except for the one which I've provided code for(homePageProducts.js).
App.js
import './App.css';
import Header from './Components/Header';
import Footer from './Components/Footer';
import CarouselContainer from './Components/Carousel/CarouselContainer';
import homePageProducts from './Components/homePageProducts/homePageProducts';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<Header></Header>
<CarouselContainer></CarouselContainer>
<homePageProducts></homePageProducts>
<Footer></Footer>
</div>
);
}
export default App;
homePageProducts.js
import React from 'react';
function homePageProducts()
{
return(
<div>
<p>Good morning</p>
</div>
);
}
export default homePageProducts;
PS I was just testing around with this component, Hence the simple code.
I've checked twice and I'm sure that I've imported homePageProducts.js correctly
If you meant to render a React component, start its name with an uppercase letter.
import HomePageProducts from './Components/homePageProducts/homePageProducts';
and render it
<HomePageProducts/>
make sure you have imported it correctly import homePageProducts from './Components/homePageProducts/homePageProducts'
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;