From bd2166e82527565a95db86a2c7720f2288266619 Mon Sep 17 00:00:00 2001 From: Quantum Date: Mon, 10 Feb 2025 13:34:32 -0500 Subject: [PATCH] Avoid pointless React namespace --- src/ActionLink.tsx | 6 +++--- src/App.tsx | 34 +++++++++++++++++----------------- src/Collapsible.tsx | 8 ++++---- src/CopyButton.tsx | 10 +++++----- src/Input.tsx | 16 ++++++++-------- src/OTPOutput.tsx | 4 ++-- src/Select.tsx | 10 +++++----- 7 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/ActionLink.tsx b/src/ActionLink.tsx index 98dc021..b98fccb 100644 --- a/src/ActionLink.tsx +++ b/src/ActionLink.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, {HTMLProps, SyntheticEvent, useCallback} from 'react'; -type HTMLAnchorProps = Omit, 'href' | 'onClick'>; +type HTMLAnchorProps = Omit, 'href' | 'onClick'>; export default function ActionLink({onClick, className, ...props}: HTMLAnchorProps & { onClick: () => void }) { - const handleClick = React.useCallback((e: React.SyntheticEvent) => { + const handleClick = useCallback((e: SyntheticEvent) => { e.preventDefault(); onClick(); }, [onClick]); diff --git a/src/App.tsx b/src/App.tsx index f6ddfab..0a5a361 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import base32Decode from 'base32-decode'; import {NumberInput, TextInput} from './Input'; import OTPOutput from './OTPOutput'; @@ -18,12 +18,12 @@ function parseState() { function App() { const [advanced, setAdvanced] = useState(false); - const [state, setState] = React.useState(() => parseState() || defaults); + const [state, setState] = useState(() => parseState() || defaults); const {secret, step, digits, algorithm} = state; - const [offset, setOffset] = React.useState(0); - const [remaining, setRemaining] = React.useState(0); + const [offset, setOffset] = useState(0); + const [remaining, setRemaining] = useState(0); - const [validSecret, decoded] = React.useMemo(() => { + const [validSecret, decoded] = useMemo(() => { try { return [true, base32Decode(secret.toUpperCase(), 'RFC4648')]; } catch (e) { @@ -35,13 +35,13 @@ function App() { const validDigits = digits > 0 && digits <= 10; const valid = validSecret && validStep && validDigits && !!secret; - React.useEffect(() => { + useEffect(() => { if (!validStep) return; const now = Date.now(); setOffset(Math.floor(now / (1000 * step))); }, [validStep, step]); - React.useEffect(() => { + useEffect(() => { if (!validStep) return; const now = Date.now(); const nextUpdate = Math.floor(now / 1000) * 1000 + 1000; @@ -55,50 +55,50 @@ function App() { return () => clearTimeout(timer); }, [validStep, step, offset, remaining]); - const showAdvanced = React.useCallback(() => { + const showAdvanced = useCallback(() => { setAdvanced(true); }, []); - const hideAdvanced = React.useCallback(() => { + const hideAdvanced = useCallback(() => { setAdvanced(false); }, []); - const setSecret = React.useCallback( + const setSecret = useCallback( (secret: string) => setState((state) => ({...state, secret})), [], ); - const setStep = React.useCallback( + const setStep = useCallback( (step: number) => setState((state) => ({...state, step})), [], ); - const setDigits = React.useCallback( + const setDigits = useCallback( (digits: number) => setState((state) => ({...state, digits})), [], ); - const setAlgorithm = React.useCallback( + const setAlgorithm = useCallback( (algorithm: string) => setState((state) => ({...state, algorithm})), [], ); - const onReset = React.useCallback( + const onReset = useCallback( () => setState((state) => ({...state, step: 30, digits: 6, algorithm: 'sha1'})), [], ); - React.useEffect(() => { + useEffect(() => { const value = serializeState(state); history.replaceState(null, '', window.location.pathname + window.location.search + (value && `#!${value}`)); }, [state]); - const onHashChange = React.useCallback(() => { + const onHashChange = useCallback(() => { const state = parseState(); state && setState(state); }, []); - React.useEffect(() => { + useEffect(() => { window.addEventListener('hashchange', onHashChange); return () => window.removeEventListener('hashchange', onHashChange); }, [onHashChange]); diff --git a/src/Collapsible.tsx b/src/Collapsible.tsx index bc6a477..fe034fb 100644 --- a/src/Collapsible.tsx +++ b/src/Collapsible.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import React, {ReactNode, useEffect, useId} from 'react'; import {Collapse} from 'bootstrap'; -export default function Collapsible({children, show}: { children: React.ReactNode; show: boolean }) { - const id = React.useId(); +export default function Collapsible({children, show}: { children: ReactNode; show: boolean }) { + const id = useId(); - React.useEffect(() => { + useEffect(() => { const collapse = Collapse.getOrCreateInstance(`#${id}`, {toggle: show}); if (show) collapse.show(); diff --git a/src/CopyButton.tsx b/src/CopyButton.tsx index f14d4e1..80a3c9b 100644 --- a/src/CopyButton.tsx +++ b/src/CopyButton.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React, {useCallback, useEffect, useId, useState} from 'react'; import Copy from './copy.svg?react'; import {Popover} from 'bootstrap'; export default function CopyButton({text}: { text: string }) { - const id = React.useId(); - const [popover, setPopover] = React.useState(false); + const id = useId(); + const [popover, setPopover] = useState(false); - React.useEffect(() => { + useEffect(() => { if (!popover) return; const instance = Popover.getOrCreateInstance(`#${id}`, { trigger: 'manual', @@ -20,7 +20,7 @@ export default function CopyButton({text}: { text: string }) { }, 1000); }, [id, popover]); - const onCopy = React.useCallback(async () => { + const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(text); setPopover(true); diff --git a/src/Input.tsx b/src/Input.tsx index d872563..e51e667 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, {ReactNode, HTMLProps, useCallback, useId} from 'react'; import classNames from 'classnames'; type CommonProps = { - label: React.ReactNode; - error?: React.ReactNode; + label: ReactNode; + error?: ReactNode; }; type TextInputProps = { @@ -11,12 +11,12 @@ type TextInputProps = { onChange: (value: string) => void; } -type HTMLInputProps = Omit, 'onChange' | 'label'>; +type HTMLInputProps = Omit, 'onChange' | 'label'>; function BaseInput({label, value, onChange, error, ...props}: CommonProps & HTMLInputProps & TextInputProps) { - const id = React.useId(); - const handleChange = React.useCallback( - (e: React.ChangeEvent) => onChange(e.target.value), + const id = useId(); + const handleChange = useCallback( + (e: ChangeEvent) => onChange(e.target.value), [onChange], ); @@ -38,6 +38,6 @@ export function NumberInput({value, onChange, ...props}: CommonProps & { min?: number; max?: number; }) { - const handleChange = React.useCallback((value: string) => onChange(+value), [onChange]); + const handleChange = useCallback((value: string) => onChange(+value), [onChange]); return ; } diff --git a/src/OTPOutput.tsx b/src/OTPOutput.tsx index 9206a2a..f4e71ea 100644 --- a/src/OTPOutput.tsx +++ b/src/OTPOutput.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import {HOTP, HOTPOptions} from '@otplib/core'; import {createDigest} from '@otplib/plugin-crypto-js'; import classNames from 'classnames'; @@ -25,7 +25,7 @@ export default function OTPOutput({secret, offset, algorithm, digits}: { algorithm: HashAlgorithm; digits: number; }) { - const otp = React.useMemo(() => new HOTP({ + const otp = useMemo(() => new HOTP({ createDigest, digits, algorithm: ALGORITHMS[algorithm], diff --git a/src/Select.tsx b/src/Select.tsx index 05a4f04..160a19b 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -1,14 +1,14 @@ -import React from 'react'; +import React, {ChangeEvent, ReactNode, useCallback, useId} from 'react'; export default function Select({label, options, value, onChange}: { - label: React.ReactNode; + label: ReactNode; options: Record; value: T; onChange: (value: T) => void; }) { - const id = React.useId(); - const handleChange = React.useCallback( - (e: React.ChangeEvent) => onChange(e.target.value as T), + const id = useId(); + const handleChange = useCallback( + (e: ChangeEvent) => onChange(e.target.value as T), [onChange], );