Created
May 14, 2023 21:12
-
-
Save ali-sabry/a56968204e13070b9d7a9d563d7abc1f to your computer and use it in GitHub Desktop.
This custom hook is called useRandomColorScheme and it generates random color schemes for UI elements based on user preferences.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from "react"; | |
const getRandomColor = () => { | |
const getRandomNumber = () => Math.floor(Math.random() * 256); | |
const toHex = (number) => number.toString(16).padStart(2, "0"); | |
return `#${toHex(getRandomNumber())}${toHex(getRandomNumber())}${toHex( | |
getRandomNumber() | |
)}`; | |
}; | |
const getComplementaryColor = (color) => { | |
const red = parseInt(color.slice(1, 3), 16); | |
const green = parseInt(color.slice(3, 5), 16); | |
const blue = parseInt(color.slice(5, 7), 16); | |
const complementaryRed = 255 - red; | |
const complementaryGreen = 255 - green; | |
const complementaryBlue = 255 - blue; | |
const toHex = (number) => number.toString(16).padStart(2, "0"); | |
return `#${toHex(complementaryRed)}${toHex(complementaryGreen)}${toHex( | |
complementaryBlue | |
)}`; | |
}; | |
//==== Custom hook | |
const useRandomColorScheme = (userPreference) => { | |
const [colorScheme, setColorScheme] = useState({}); | |
useEffect(() => { | |
let primaryColor; | |
if (userPreference === "warm") { | |
primaryColor = `#${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}00${Math.floor(Math.random() * (128 - 0) + 0).toString(16)}`; | |
} else if (userPreference === "cool") { | |
primaryColor = `#00${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}`; | |
} else if (userPreference === "neutral") { | |
primaryColor = `#${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}`; | |
} else { | |
primaryColor = getRandomColor(); | |
} | |
const secondaryColor = getComplementaryColor(primaryColor); | |
setColorScheme({ primary: primaryColor, secondary: secondaryColor }); | |
}, [userPreference]); | |
return colorScheme; | |
}; | |
const Card = ({ title, content, userPreference }) => { | |
const { primary, secondary } = useRandomColorScheme(userPreference); | |
return ( | |
<div | |
style={{ | |
backgroundColor: primary, | |
color: secondary, | |
padding: "20px", | |
borderRadius: "10px", | |
width: "300px", | |
margin: "10px", | |
}} | |
> | |
<h2>{title}</h2> | |
<p>{content}</p> | |
</div> | |
); | |
}; | |
// A component that renders a select element with options for user preferences | |
const PreferenceSelector = ({ value, onChange }) => { | |
return ( | |
<select value={value} onChange={onChange}> | |
<option value="warm">Warm</option> | |
<option value="cool">Cool</option> | |
<option value="neutral">Neutral</option> | |
<option value="random">Random</option> | |
</select> | |
); | |
}; | |
//=== Usage | |
const App = () => { | |
const [userPreference, setUserPreference] = useState("random"); | |
const handleChange = (e) => setUserPreference(e.target.value); | |
return ( | |
<div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}> | |
<h1>Random Color Scheme Generator</h1> | |
<p>Select your preference:</p> | |
<PreferenceSelector value={userPreference} onChange={handleChange} /> | |
<p style={{ marginBottom: '50px' }}>See some examples:</p> | |
<div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}> | |
<Card | |
title="Card One" | |
content="This is the first card." | |
userPreference={userPreference} | |
/> | |
<Card | |
title="Card Two" | |
content="This is the second card." | |
userPreference={userPreference} | |
/> | |
<Card | |
title="Card Three" | |
content="This is the third card." | |
userPreference={userPreference} | |
/> | |
</div> | |
</div> | |
); | |
}; | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment