diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 1dec31c..dd76d6e 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,6 +1,7 @@ import React, { Suspense } from "react"; import "./App.css"; +import Parameters from "../Parameters/Parameters"; import Header from "../Header/Header"; import Toolbar from "../Toolbar/Toolbar"; import IconGrid from "../IconGrid/IconGrid"; @@ -15,6 +16,7 @@ const waitingFallback = ; const App: React.FC = () => { return ( +
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx new file mode 100644 index 0000000..9421ef0 --- /dev/null +++ b/src/components/Parameters/Parameters.tsx @@ -0,0 +1,22 @@ +import React, { useEffect } from "react"; +import { useSearchParam } from "react-use"; +import { useSetRecoilState } from "recoil"; +import TinyColor from "tinycolor2"; + +import { iconColorAtom } from "../../state/atoms"; + +const Parameters: React.FC<{}> = () => { + const color = useSearchParam("color")?.replace(/["']/g, ""); + const setColor = useSetRecoilState(iconColorAtom); + + useEffect(() => { + if (color) { + const normalizedColor = TinyColor(color); + if (normalizedColor.isValid()) setColor(normalizedColor.toHexString()); + } + }, [color, setColor]); + + return null; +}; + +export default Parameters;