I am trying to build a random color generater with the randomcolor npm package. When a button is clicked a div should change its color randomly. But react doesn't let me use the randomColor function inside of my reatc component and I don't know why.
import './App.css';
import randomColor from 'randomcolor';
import { useState } from 'react';
import styled from 'styled-components';
function App() {
const [randomColor, setRandomColor] = useState('white');
const Generated = styled.div`
background-color: ${randomColor};
transition: all 0.3s;
padding: 4rem 8rem;
border-radius: 10px;
`;
return (
<Container className="App">
<Button
onClick={() => setRandomColor(randomColor({luminosity: "random", hue:"random"}))}
className="generate"
>
Generate
</Button>
<Generated>Generated Color: {randomColor}</Generated>
</Container>
);
}
export default App;
Does anyone know why it says "randomColor" is declared but never used and why I can't use it in my component?
you have silly mistake, change your randomColor and SetRandomColor name javascript confused by the same name with randomColor() function is this correct of your code :
import './App.css';
import randomColor from 'randomcolor';
import { useState } from 'react';
import styled from 'styled-components';
function App() {
const [randomColor2, setRandomColor2] = useState('white');
const Generated = styled.div`
background-color: ${randomColor};
transition: all 0.3s;
padding: 4rem 8rem;
border-radius: 10px;
`;
return (
<Container className="App">
<Button
onClick={() => setRandomColor2(randomColor({luminosity: "random", hue:"random"}))}
className="generate"
>
Generate
</Button>
<Generated>Generated Color: {randomColor2}</Generated>
</Container>
);
}
export default App;
Related
Having the following components:
<CheckboxGroupLabel htmlFor={option.label}>
<FormCheckbox
onClick={() => onChange}
key={option.label}
defaultChecked={defaultChecked}
{...rest}
/>
{option.value}
</CheckboxGroupLabel>
Their styled components are:
import styled from 'styled-components';
import * as Checkbox from '#radix-ui/react-checkbox';
export const CheckboxGroupLabel = styled.label`
background-color: red;
display: flex;
width: 100%;
margin: 18px;
line-height: 20px;
cursor: pointer;
width: 100px;
`;
export const StyledCheckboxRoot = styled(Checkbox.Root)`
button {
all: unset;
}
`;
So the checkbox is inside label but only checkbox is clickable, I would like to make the whole label clickable.
Is there a way to do that?
Have you tried just moving onClick into CheckboxGroupLabel?
https://codesandbox.io/s/label-onclick-3ebkbi
import "./styles.css";
import * as Checkbox from "#radix-ui/react-checkbox";
import { CheckIcon } from "#radix-ui/react-icons";
export default function MyComponent() {
const onLabelClick = () => {
console.log("clicked label");
};
return (
<div>
<label onClick={onLabelClick} htmlFor="mycheckbox">
<Checkbox.Root className="checkbox" defaultChecked id="mycheckbox">
<Checkbox.Indicator className="indicator">
<CheckIcon />
</Checkbox.Indicator>
My checkbox label
</Checkbox.Root>
</label>
</div>
);
}
Whenever I try to style Antd Design component ( Layout, Sider and so on ) but it doesn't seems to be working. Therefore there won't be any changes on them. But it works fine on other HTML elements like div, h1, p tags.
Here's my code:
.sidbar{
flex: 1;
background-color: red;
border-right: 0.5px solid rgb(218, 217, 217);
min-height: 100vh;
background-color: white;
}
import styles from "../styles/Sidebar.module.scss";
import React from "react";
import { Layout, Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;
import {
HomeOutlined,
DashboardOutlined,
TeamOutlined,
} from "#ant-design/icons";
import Link from "next/link";
const Sidebar = () => {
return (
<div>
<Layout className={styles.sidebar}>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
);
};
export default Sidebar;
i want to split page between styling and app
example
in page style.js
import styled from "styled-components";
//i dont know how to export all const
export const Container = styled.div`
display: flex;
flex-direction: row;
`;
export const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;
and in page app.js
import * as All from "./style.js"
//i dont know, how to import all const in style.js
function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}
how to export and import all const when const in style.js there are so many?
another option you can export like this :
import styled from "styled-components";
const Container = styled.div`
display: flex;
flex-direction: row;
`;
const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;
export {Container,Sidebar}
and you can import like this :
import { Container,Sidebar } from './style';
function App() {
return (
<Container>
<Sidebar>
</Sidebar>
</Container>
);
}
There is a beautiful way to do that. This way also let you know which component is styled-component or single component.
// style.js
export const Styled = {
Container: styled.div`
display: flex;
flex-direction: row;
`,
Sidebar: styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`,
}
import { Styled } from './style';
function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}
Dae Hyeon Mun's approach is great, but you can simplify it further and avoid having to refactor your styles.js file by using a wildcard import, which essentially creates a module object so you don't have to!:
// style.js
export const Container = styled.div`
...
`;
export const Sidebar = styled.div`
...
`;
// app.js
import * as Styled from './style';
function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}
More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#creating_a_module_object
You can use "export const" like you already did for exporting. The simplest way to import those const is:
import * as styled from "./style.js"
//this will import all 'export const' containing 'styled' from "./style.js"
function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I would like to specify style(background and text color) of the button that will be disabled later in code.
button needs to look like this on render and like this after click
My code is
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [loading, setLoading] = useState(false);
const handleClick = (e) => {
e.preventDefault();
setLoading(true);
};
return (
<div className="App">
<button disabled={loading} onClick={handleClick} className="btn">
{" "}
Click me
</button>
</div>
);
}
and Css
.btn {
width: 200px;
height: 50px;
background-color: blue;
/* color: white; */
}
.btn:hover {
cursor: pointer;
}
link to codesandbox
When I specify color of the text(white) disabled doesn't change color to grey( button doesn't look disabled), when text color is not defined, it's black and after click it's grey. Is there any way to define text color as white before click, and when button is clicked change color to grey? Because I need to make the button with blue background and white text on render. Thank you anyone who will help me.
Most of this can be done with CSS, though you'll need to add one more thing to your React component.
JS:
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [loading, setLoading] = useState(false);
const handleClick = (e) => {
e.preventDefault();
setLoading(true);
};
return (
<div className="App">
<button disabled={loading} onClick={handleClick} className={`btn${loading ? ' disabled' : ''}`}>
{" "}
Click me
</button>
</div>
);
}
CSS
.btn {
width: 200px;
height: 50px;
background-color: blue;
/* color: white; */
}
.btn.disabled {
opacity: .65;
pointer-events: none;
}
.btn:hover {
cursor: pointer;
}
.btn:active {
color: green; // Or whatever style you want
}
EDIT: You can also use the :enabled and :disabled pseudo-selectors like the comment above said.
I am having a unique scenario but I am unable to understand this.
When I hover on one DIV then it selects both the sibling DIVS.
I do not want this behaviour.
I want to select only the DIV which is being hovered.
How can I achieve this in ReactJS ?.
The working code is shown below.
App.js
import React,{useState} from 'react';
import "./App.css";
const App = () => {
const [hover, setHover] = useState(false);
const texts = ["Arjun", "Andy"];
let cclass = hover ? "item itemHover":"item";
return (
<div className="wrapper">
{
texts.map((t, i) => (
<div className={cclass} key={i} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
{t}
</div>
))
}
</div>
)
}
export default App;
App.css
.wrapper{
width: 60%;
margin: 10rem auto;
border: 1px solid;
display: flex;
}
.item{
width: 50%;
border: 1px solid grey;
height: auto;
padding: 2rem 3rem;
}
.itemHover{
background: grey;
}
The hover state in App is common for both divs. To make it work you need to
have hover state for each div separate. For this, create a new component TextDiv
import React, {useState} from "react";
import "./styles.css";
export default function TextDiv({t}) {
const [hover, setHover] = useState(false);
let cclass = hover ? "item itemHover":"item";
return (
<div className={cclass} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
{t}
</div>
)
}
and change App.js file
import React, {useState} from "react";
import TextDiv from './TextDiv'
import "./styles.css";
export default function App() {
const texts = ["Arjun", "Andy"];
return (
<div className="wrapper">
{
texts.map((t, i) => (
<TextDiv t={t} key={i}/>
))
}
</div>
)
}
Can you do it with CSS? It's very simple with CSS. Just add this:
.item:hover{
background: grey;
}