Color
A simple color provider for any React or Next.js application to enable you view your components the way you like.
Installation
bun add @nordaun/color
Usage
Provider
/providers/color.tsx
| 1 | import { ColorProvider } from "@nordaun/color"; |
| 2 | |
| 3 | export function ProviderComponent({ children }: { children: React.ReactNode }) { |
| 4 | return ( |
| 5 | <ColorProvider |
| 6 | cookieName="COLOR" |
| 7 | classPrefix="color-" |
| 8 | colors={["red", "green", "blue"]} |
| 9 | defaultColor="red" |
| 10 | > |
| 11 | {children} |
| 12 | </ColorProvider> |
| 13 | ); |
| 14 | } |
Hook
/hooks/color.tsx
| 1 | import { useColor } from "@nordaun/color"; |
| 2 | |
| 3 | const { color, colors, setColor } = useColor(); |
| 4 | console.log("Current color:", color); |
| 5 | console.log("All avialable colors:", colors); |
| 6 | setColor("red"); |