![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@uxf/core
Advanced tools
Readme
CLASSES.IS_HOVERABLE
for is-hoverable classname)
focus-visible
is-active
is-busy
is-disabled
is-focused
is-hoverable
is-hovered
is-invalid
is-loading
is-not-hoverable
is-readonly
is-required
is-selected
!!! Required @uxf/resizer version >= 2.3.2
which supported quality
parameter.
[
{
"route": "/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)/:version/:filename(*).:extension.:toFormat",
"source": "https://uxf-base.uxf.dev/:filename+.:extension"
},
{
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
"source": "https://s3.uxf.dev/${APP_NAME}-${APP_ENV}/:namespace/:p1/:p2/:filename.:extension"
}
]
import {resizerImageUrl} from "@uxf/core/utils/resizer";
<img src={resizerImageUrl(file, width, height, params)}/>
import {resizerImageUrl} from "@uxf/core/utils/resizer";
import staticImage from "./path/to/static-image.png";
<img src={resizerImageUrl(staticImage, width, height, params)}/>
secure?: boolean;
httpOnly?: boolean;
path?: string;
import { Cookie } from "@uxf/core/cookie";
// on client
const cookie = Cookie.create();
// in getInitialProps
const cookie = Cookie.create(ctx);
cookie.has("cookie-name");
cookie.get("cookie-name");
cookie.set("cookie-name", "value", /* ttl in seconds (optional) */, /* options (optional) */)
cookie.delete("cookie-name", /* options (optional) */);
import { useBodyScrollLock } from "@uxf/core/hooks/useBodyScrollLock";
import { useState } from "react";
const innerRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState<boolean>();
const clearAllOnclose = false;
useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, {
allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove
clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount
reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap
});
<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>
import { useIsMounted } from "@uxf/core/hooks/useIsMounted";
const isMounted = useIsMounted();
import { useIsomorphicLayoutEffect } from "@uxf/core/hooks/useIsomorphicLayoutEffect";
useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);
import { useKey } from "@uxf/core/hooks/useKey";
import { useRef } from "react";
const targetRef = useRef<HTMLDivElement>(null);
const disabled = false; // eg. for passing disabled state
useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
disabled,
targetRef, // if not provided, then `document` will be used
type: "keydown"
});
<div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div>
import { useMinWindowWidth } from "@uxf/core/hooks/useMinWindowWidth";
const isDesktop = useMinWindowWidth(1200);
const isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated every 200 ms
const example = isDesktop ? "desktop" : "tablet";
const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";
import { usePagination } from "@uxf/core/hooks/usePagination";
const paginationItems = usePagination({ page: 1, count: 10 })
import { useRafState } from "@uxf/core/hooks/useRafState";
const [state, setState] = useRafState<boolean>(false);
import { useOnUnmount } from "@uxf/core/hooks/useOnUnmount";
const exampleCallback = () => {};
useOnUnmount(exampleCallback());
import { useOnUpdate } from "@uxf/core/hooks/useOnUpdate";
useOnUpdate(() => {/* code */}, [/* deps */]);
import { useWindowScroll } from "@uxf/core/hooks/useWindowScroll";
const windowScroll = useWindowScroll();
const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";
import { useWindowSize } from "@uxf/core/hooks/useWindowSize";
const windowSize = useWindowSize();
const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";
import { useFocusTrap } from "@uxf/core/hooks/useFocusTrap";
import { useState } from "react";
const [active, setActive] = useState<boolean>();
const focusTrapRef = useFocusTrap(active);
<div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>
import { useFocusReturn } from "@uxf/core/hooks/useFocusReturn";
import { useState } from "react";
const [active, setActive] = useState<boolean>();
// Returns focus to last active element, e.g. in Modal or Popover
useFocusReturn(active);
import { useAnchorProps } from "@uxf/core/hooks/useAnchorProps";
import { AnchorHTMLAttributes } from "react";
// extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props
const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
analyticsCallback: () => console.log("analytics"),
disabled: false,
href: "https://www.google.com/",
loading: false,
onClick: () => console.log("success"),
type: "submit", // simulate <button type="submit" /> function
});
<a {...anchorProps}>Click me</a>
// example with generics
import { UseAnchorProps, useAnchorProps } from "@uxf/core/hooks/useAnchorProps";
import { AnchorHTMLAttributes } from "react";
interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> {
customProp?: boolean;
}
const anchorProps = useAnchorProps<Props>({
customProp: true,
loading: false,
href: "https://www.google.com/",
});
<a {...anchorProps}>Click me</a>
import { useButtonProps } from "@uxf/core/hooks/useButtonProps";
import { ButtonHTMLAttributes } from "react";
// extends <button /> by `analyticsCallback` and `loading` props
const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({
analyticsCallback: () => console.log("analytics"),
disabled: false,
loading: false,
onClick: () => console.log("success"),
type: "submit",
});
<button {...buttonProps}>Click me</button>
// example with generics
import { UseButtonProps, useButtonProps } from "@uxf/core/hooks/useButtonProps";
import { ButtonHTMLAttributes } from "react";
interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
customProp?: boolean;
}
const buttonProps = useButtonProps<Props>({
customProp: true,
loading: false,
type: "submit",
});
<button {...buttonProps}>Click me</button>
import { useClickableProps } from "@uxf/core/hooks/useClickableProps";
import { HTMLAttributes } from "react";
// extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props
const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
analyticsCallback: () => console.log("analytics"),
disabled: false,
loading: false,
onClick: () => console.log("success"),
type: "submit", // simulate <button type="submit" /> function
});
<div {...clickableProps}>Click me</div>
// example with generics
import { UseClickableProps, useClickableProps } from "@uxf/core/hooks/useClickableProps";
import { HTMLAttributes } from "react";
interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> {
customProp?: boolean;
}
const buttonProps = useClickableProps<Props>({
customProp: true,
hidden: false,
loading: false,
});
<button {...buttonProps}>Click me</button>
import { useMouseDragToScroll } from "@uxf/core/hooks/useMouseDragToScroll";
const targetRef = useRef<HTMLDivElement>(null);
const style = useMouseDragToScroll(scrollRef);
<div style={style}>Drag to scroll</div>
import { useInputFocus } from "@uxf/core/hooks/useInputFocus";
const focusRef = useRef<HTMLInputElement>(null); // or HTMLTextAreaElement
const { onBlur, onFocus } = props;
const input = useInputFocus(focusRef, onBlur, onFocus);
<div>Input is {input.focused}</div>
<button onClick={input.focus}>Focus input</button>
<input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />
import { useLatest } from "@uxf/core/hooks/useLatest";
const latestState = useLatest(someUnstableWhatever);
useEffect(() => {
latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
}, [latestState])
import { usePrevious } from "@uxf/core/hooks/usePrevious";
const previousState = usePrevious(someUnstableWhatever);
useEffect(() => {
previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
}, [previousState])
import { queryParamToString, queryParamToNumber } from "@uxf/core/next";
queryParamToNumber(ctx.query.id);
queryParamToString(ctx.query.name);
import { cameCaseToDash } from "@uxf/core/utils/cameCaseToDash";
const example = cameCaseToDash("fooBar") /* returns "foo-bar" */
import { composeRefs } from "@uxf/core/utils/composeRefs";
const firstRef = useRef<HTMLDivElement>(null);
const secondRef = useRef<HTMLDivElement>(null);
const example = <div ref={composeRefs(firstRef, secondRef)} />;
import { cx } from "@uxf/core/utils/cx";
/* fork of https://github.com/lukeed/clsx */
const example = cx("foo", true && "bar", "baz", false && "bam", undefined) /* returns "foo bar baz" */
import { forwardRef } from "@uxf/core/utils/forwardRef";
interface Props {
className?: string;
}
// will enforce 'displayName'
export const ExampleComponent = forwardRef<HTMLDivElement, Props>("ExampleComponent", (props, ref) => {
return <div className={props.className} ref={ref} />;
});
import { isBrowser } from "@uxf/core/utils/isBrowser";
import { isServer } from "@uxf/core/utils/isServer";
const browserExample = isBrowser; /* returns true if DOM is available */
const serverExample = isServer; /* returns true if DOM is NOT available */
import { slugify } from "@uxf/core/utils/slugify";
const example = slugify("Jak se dnes máte?") /* returns "jak-se-dnes-mate" */
import { trimTrailingZeros } from "@uxf/core/utils/trimTrailingZeros";
const example = trimTrailingZeros("120,450") /* returns "120,45" */
import { Validator } from "@uxf/core";
Validator.isEmail("...");
Validator.isPhone("...");
FAQs
Unknown package
We found that @uxf/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.