We Keep Coding

Toggle classes in react styled components with react-responsive library

I am using react styled components and want to create a toggle functionality or the Link components.
The first step I took was to create the useMediaQueries hook and use min-width and max-width to delimit the pixels.
import { useMediaQuery } from 'react-responsive'
// Media queries
const isDesktop = useMediaQuery({ query: '(min-width: 700px)' });
const isMobile = useMediaQuery({ query: '(max-width: 700px)' });
After this, I created the styled components and moved them into separate file called Header.styles.js:
import { Link } from "react-router-dom";
import styled from "styled-components";
export const LinkStyled = styled(Link)`
text-decoration: none;
color: #333;
margin: 0px 15px 0px 15px;
font-weight: 500;
`;
export const LinkWrapper = styled.div`
display: flex;
flex-wrap: wrap;
`;
export const HeaderWrapper = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 30px 0px 30px;
/* flex-wrap: wrap; */
`;
The header use the media queries hook and display/hide the menu button and the header wrapper:
// Toggle state
const [ isVisible, setIsvisible ] = useState(false);
return (
<HeaderWrapper>
<p>Expenses</p>
{isDesktop && <LinkWrapper isMobileVersion={isMobile}>
<LinkStyled to='/'>Home</LinkStyled>
<LinkStyled to='/about'>About</LinkStyled>
<LinkStyled to='/profile'>Profile</LinkStyled>
<LinkStyled to='/signup'>Signup</LinkStyled>
<LinkStyled to='/login'>Login</LinkStyled>
</LinkWrapper>}
{ isMobile && <GiHamburgerMenu size={25} onClick={() => setIsvisible(!isVisible)} /> }
</HeaderWrapper>
)
}
I am new to styled components. How can I toggle the classes or assign a class (created in the styled components file) only when the display is set on mobile?
Thanks

I don't see where exactly you wanna use it, but basically you can use ternary operator.
<LinkWrapper style={{ color: isMobile ? "#333" : "#444" }} />
This code is just an example how to solve your problem
Styled components are not just styles, but whole customized components.

How can I use className in component from styled-components in React?

NavStyles.js
import styled from 'styled-components';
export const Nav = styled.navwidth: 100%; ;
export const NavMenuMobile = styled.ul`
height: 80px;
.navbar_list_class {
font-size: 2rem;
background-color: red;
}
${props => props.navbar_list_props && `
font-size: 2rem;
background-color: gray;
`}
`;
Navbar.js
import React from 'react'
import {Nav, NavMenuMobile} from "./NavStyles";
const Navbar = () => {
return (
<Nav>
{/* work no problem */}
<NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>
{/* not work How to use..? */}
<NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
</Nav>
)
}
export default Navbar

<Nav>
<NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>
Try This

Looks like you are setting styles for the children within NavMenuMobile with the class "navbar_list_class".
Should work with &.navbar_list_class
export const NavMenuMobile = styled.ul`
height: 80px;
&.navbar_list_class {
font-size: 2rem;
background-color: red;
}
`;

How can I remove whitespace from a string in react-native?

I am using react-native. However, when a long string is input, the line breaks are not consistent in the right screen.
like this
However, I would like the string to wrap consistently as in the image below.
this is my code how can i fix or add code??
import React from 'react';
import styled from 'styled-components/native';
const Container = styled.View`
background: lightskyblue;
width: 100%;
height: 100%;
`;
const PolicyContainer = styled.View`
background: lightyellow;
`;
const Label = styled.Text`
font-size: 13px;
`;
const Policy = () => {
return (
<Container>
<PolicyContainer>
<Label>
{'<'}example{'>'}('https://example'이하 'example')은(는) 「개인정보
보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한
고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이
개인정보 처리방침을 수립·공개합니다.
</Label>
</PolicyContainer>
</Container>
);
};
export default Policy;

Try using text-align: justify; in the style of Label. I believe it will solve your problem.
const Label = styled.Text`
font-size: 13px;
text-align: justify;
`;

Change styles of component when hovering sibling

I have a simple case where I want the box2 to change background to yellow, if the box1 was hovered.
code sample:
const Box = styled.div`
height: 200px;
width: 200px;
background: blue;
`;
const Box2 = styled.div`
height: 200px;
width: 200px;
background: green;
margin-top: 20px;
${Box}:hover {
background: yellow;
}
`;
in render:
<Box>Box 1</Box>
<Box2>Box 2</Box2>
Link to the code preview:
https://stackblitz.com/edit/react-rvhgov
Thanks!
Edit This one above doesnt seem to work, dont know why, it should work?

Depend on your render items you can do it with different approaches but as things we got here, you can use adjacent sibling combinator (+) or general sibling combinator (~). So all you have to do is to replace this
${Box}:hover {
background: yellow;
}
with
/* If you want to only select the next element sibling, you should replace ~ with + */
${Box}:hover ~ & {
background: yellow
}
Working Demo:
https://stackblitz.com/edit/select-next-sibling

You can try this:
import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import styled, {css} from 'styled-components';
const Box = styled.div`
height: 200px;
width: 200px;
background: blue;
`;
const Box2 = styled.div`
height: 200px;
width: 200px;
background: green;
margin-top: 20px;
${props => props.hovered && css`
background: yellow;
`}
`;
export default function App() {
const [hovered, setHovered] = useState(false);
return (
<div className="App">
{'' + hovered}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Box onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>Box 1</Box>
<Box2 hovered={hovered}>Box 2</Box2>
</div>
);
}
render(<App />, document.getElementById('root'));
With this approach, it doesn't matter are elements/components siblings or not. It will work for siblings but also when components are nested in different subtrees.

Add styles to Styled Component custom Component in React Native

I have button.js:
import React from "react";
import styled from "styled-components";
const StyledButton = styled.TouchableOpacity`
border: 1px solid #fff;
border-radius: 10px;
padding-horizontal: 10px;
padding-vertical: 5px;
`;
const StyledButtonText = styled.Text`
color: #fff;
font-size: 12;
`;
export default ({ children }) => (
<StyledButton>
<StyledButtonText>{children.toUpperCase()}</StyledButtonText>
</StyledButton>
);
And its usage:
import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";
const StyledNavView = styled.View`
justify-content: flex-end;
flex-direction: row;
background: #000;
padding-horizontal: 10px;
padding-vertical: 10px;
`;
const StyledTodayButton = styled(Button)`
margin: 10px;
`;
export default class Nav extends Component {
render() {
return (
<StyledNavView>
<StyledTodayButton>Today</StyledTodayButton>
<Button>Previous</Button>
</StyledNavView>
);
}
}
Problem is, the margin I apply in StyledTodayButton is actually never applied. Have I misunderstood extending styles in Styled Components?

There are 2 ways to make it work:
extend button style:
const StyledTodayButton = Button.extend'margin: 10px'
pass prop to button:
const Button = styled.button'
/* ...your props */
margin: ${props => props.withMargin ? '10px' : '0px'};
and then call in render method you can invoke it with:
<Button withMargin {...restProps} />