Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue
You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles
Related
In React application I am displaying list of images. When individual book is removed Hide Books button takes the place to that component.
What I am trying to achieve is Hide Books button should remain at the same position and should dynamatically change its position on y axis if whole row of books is deleted
Initial state of application
When individual book is removed -
app.js
return(
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
position: "absolute",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)
could you share more of your code? maybe have a codesandox example? It seems to be a styling issue but it's hard to tell without more code.
-edit-
your button should be separated from your list of books, this is the reason why it essentially "follows" your last book card.
Try to do something like this
return (
<section className='wrapper'>
<div className='bookList'>
{booksData.map(book => {
//code your books here
}
</div>
//then put your button out of the div
<button onClick={function}>hide books</button>
</section>
)
your CSS for the wrapper div could be something like this
.wrapper{
display: flex;
flex-direction: column
}
this way you'll have the books first then the button will be displayed below the list
Place the button as the next sibling to the section of Books. Shown in the following. All I did was to move the button out of the section. You will have to style the button with padding and such for the updated layout.
// in index.js, BookList
return (
<>
<section className="booklist">
{booksData.map((book, index) => {
return (
<Book
key={index}
{...book}
removeIndividualBook={removeIndividualBook}
></Book>
);
})}
</section>
{booksData.length === 0 ? (
<button onClick={handleShowBook}>Show Books</button>
) : (
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
// position: "absolute",
// marginTop: "2350px",
// marginLeft: "28px",
position: "absolute",
//left: "12%",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)}
</>
);
I want to create something such that, depending on the state, a given div appears overlapping another div from the right side, here is my code:
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);
return (
<>
<div style={{ width: "100%" }}>
<div style={{ float: "left", width: "50%" }}>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
></div>
</div>
<div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
{!loggedIn && (
<div>
WHEN LOGGED IN === TRUE
</div>
)}
<div
style={
loggedIn && !hasConfirmedAccount
? { width: "100%", transition: "ease-in-out 5s" }
: { display: "none" }
}
>
<div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
</div>
</div>
</div>
</>
);
The code works fine, when loggedIn === true and hasConfirmedAccount === false div with id = notConfirmedAccount has been displayed instead of div with id=notLoggedIn, but displaying this div does not work flowing, I want a slow leaving effect of the div on the right side that would overlap the previous div
can someone tell me what to do this?
thanks for any help!
install animate.css => $ npm install animate.css --save
animate.css
2.import "./animate.css" at top your component or project
3.just put the name of aniamte on className like this pattern in your div
<div className={style.forgot} className='animate__animated animate__fadeInDown'>
also you should control your showing div with state
Use React animation Add-Ons ReactTransitionGroup and ReactCSSTransitionGroup
The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.
https://reactjs.org/docs/animation.html
I'm using the #artsy/fresnel npm package to build a responsive React application.
Here's my code
<Media greaterThanOrEqual='computer'>
<div style={{ padding: '20px 50px' }}>
Some Content Goes Here
</div>
</Media>
<Media lessThan='computer'>
<div style={{ padding: '50px 100px' }}>
Exact Same Content Goes Here
</div>
</Media>
I've searched through the documentation, but could not find a way to set the padding of my div depending on the Media tag rendered. I want to achieve something like this
<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
Some Content Goes Here
</div>
Is this doable with the #artsy/fresnel framework?
You can do this, but you’ll need to take control over the wrapper div that gets emitted by the Media component (see the note about “render-props”). So something like:
<Media greaterThanOrEqual='computer'>
{(mediaClassNames, renderChildren) => {
return (
<div style={{ padding: '20px 50px' }}>
{renderChildren ? "Some Content Goes Here" : null}
</div>
)
}}
</Media>
I'm trying to use a link on a component React which looks like that :
To obtain this result, I have this code :
return (
<>
<div style={{padding: '1em' }}>
<span style={{ color: 'grey' }}>#{Command_ID} - </span>
<span style={{ color: 'purple'}}>{Delivery_Slot}</span><br/>
<strong>{firstname} {lastName}</strong>
<p></p>
{adressPerso},{PostalCode},{city}
</div>
<div>
<IonFooter >
At the end of the code, you have an IonFooter This part of the code is'nt showing and inside, you will just have the part about the three components Phone, Map, and "Terminé".
In my case, I just want to allow a personn to click everywhere above the IonFooter part and That's the reason why i use a Link. Nonetheless, when i use one, there are some styling effects :
I just want to have the same component as before without new styling import by the Link style. concerning my code, I have this :
return (
<>
<Link to={`/`} className="item">
<div style={{padding: '1em' }}>
<span style={{ color: 'grey' }}>#{Command_ID} - </span>
<span style={{ color: 'purple'}}>{Delivery_Slot}</span><br/>
<strong>{firstname} {lastName}</strong>
<p></p>
{adressPerso},{PostalCode},{city}
</div>
</Link>
<div>
<IonFooter >
Thank you so much for your help, I'm just a beginner :)
So when I'm using an Icon in Ant Design it is always 14 * 14 px.
Is there a way to set the size maually?
Things like
<Icon width={"20px"} type="setting" />
or
<Icon style={{width: '20em'}} type="setting" />
do not work
It should be
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
https://codepen.io/anon/pen/wNgrWX
Can change the size of the icon using fontSize style property.
eg: use of style={{ fontSize: '150%'}}
<PlayCircleFilled style={{ fontSize: '150%'}} />
In the new antd Icon version, you can increase the size of the icon like this:
import { MessageTwoTone } from "#ant-design/icons";
And call it as:
<div style={{ fontSize: "30px" }}>
<MessageTwoTone />
</div>
I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.
Edited:-
I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon
<MessageTwoTone style={{ fontSize: "30px" }}/>
Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example
component.js
import { CheckCircleTwoTone } from '#ant-design/icons';
<CheckCircleTwoTone
twoToneColor="#52c41a"
className="reg_icon"
/>
component.scss
.reg_icon {
svg {
font-size: 120px !important;
}
}
Use <Icon style={{ fontSize: '30px'}} type="check-circle" />
Here is a working codepen:
https://codesandbox.io/s/x7r7k7j6xw
If using the icon inside the button like this:
<Button type="text" icon={<GithubOutlined />} />
You can add these classes/styles and it will solve the issue for you (it solved it for me)
<Button type="text"
className={styles.button}
icon={<GithubOutlined className={styles.icon}/>}
/>
.button {
// The wanted size...
font-size: 2.5em;
// Without it, changing the font size will cause problems.
width: fit-content;
height: fit-content;
.icon {
font-size: inherit;
}
}
CodePen Demo
Best way to do it with javascript
Icon.setTwoToneColor("#000");