diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index dd76d6e..4bfd6e9 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,22 +1,22 @@ 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"; import Footer from "../Footer/Footer"; import ErrorBoundary from "../ErrorBoundary/ErrorBoundary"; import Notice from "../Notice/Notice"; +import useIconParameters from "../../hooks/useIconParameters"; const errorFallback = ; -// const waitingFallback = ; const waitingFallback = ; const App: React.FC = () => { + useIconParameters(); + return ( -
diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx deleted file mode 100644 index 9421ef0..0000000 --- a/src/components/Parameters/Parameters.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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; diff --git a/src/hooks/useIconParameters.ts b/src/hooks/useIconParameters.ts new file mode 100644 index 0000000..b2881bf --- /dev/null +++ b/src/hooks/useIconParameters.ts @@ -0,0 +1,37 @@ +import { useEffect } from "react"; +import { useSearchParam } from "react-use"; +import { useSetRecoilState } from "recoil"; +import TinyColor from "tinycolor2"; +import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms"; +import { IconStyle } from "../lib"; + +export default () => { + const weight = useSearchParam("weight")?.replace(/["']/g, ""); + const size = useSearchParam("size")?.replace(/["']/g, ""); + const color = useSearchParam("color")?.replace(/["']/g, ""); + + const setColor = useSetRecoilState(iconColorAtom); + const setWeight = useSetRecoilState(iconWeightAtom); + const setSize = useSetRecoilState(iconSizeAtom); + + useEffect(() => { + if (weight) { + if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle); + } + }, [weight, setWeight]); + + useEffect(() => { + if (size) { + const normalizedSize = parseInt(size); + if (typeof normalizedSize === "number" && isFinite(normalizedSize)) + setSize(Math.min(Math.max(normalizedSize, 16), 96)); + } + }, [size, setSize]); + + useEffect(() => { + if (color) { + const normalizedColor = TinyColor(color); + if (normalizedColor.isValid()) setColor(normalizedColor.toHexString()); + } + }, [color, setColor]); +};