Develop Reference

How to implement react-particles-js with anchor links?

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

How to align buttons in cards vertically in center in React using Material-UI?

I have made 3 cards in ReactJS using material-ui, so the problem I am facing is that the first card's paragraph is small and the second and third card's paragraph is a bit bigger so when I am placing my button the position of the button differ in all the 3 cards and because of that each paragraph buttons are not aligned properly in vertically center.
I have attached the image of the problem I am facing.
[1]: https://i.stack.imgur.com/ZkGVc.jpg
Here is the CodeSandBox link :-https://codesandbox.io/s/vigilant-sanderson-yp491?fontsize=14&hidenavigation=1&theme=dark
Below is my ReactJS and material-ui code
const Room = ({room}) => {
const classes = useStyles() ;
return (
<Card className={classes.root}className={classes.cards}>
<CardMedia className={classes.media} image={room.image} title={room.name}/>
<CardContent>
<div className={classes.CardContent}>
<h2>{room.name}</h2>
<Typography>
{room.description}
</Typography>
</div>
<Button variant="outlined" color="primary" justify="space-around">
Primary
</Button>
</CardContent>
<CardActions disableSpacing className={classes.CardActions}>
</CardActions>
</Card>
)
}
style.js
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles(() => ({
media: {
height: 280,
},
cards:{
height:600
},
cardContent: {
display: 'flex',
justifyContent: 'space-between',
},
cardActions: {
justifyContent: 'space-between',
},
buttons: {
display: 'flex',
alignItems: 'center',
},
h5:{
fontfamily: 'Ubuntu',
},
}));
How can I align those buttons in each card vertically in the center while keeping the size of the paragraph the same?

As mentioned in the comment, if I understand well what you're trying to achieve, one possible solution would be to have the description have a fixed height. You can then add a scrollbar to it, and therefore the buttons will be aligned. Alternatively, instead of the scrollbar you could use a "show more" button to expand the content.
I have updated the codepen with an example using the browser native scrollbar - codepen
To enhance the solution you could look into using a slim scrollbar solution, such as react-perfect-scrollbar

How do I resize and svg logo in react gatsby?

I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```

The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.

Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />

How can I set the size of icons in Ant Design?

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");

Semantic UI React: fixed sidebar & header

I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>

One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.