Utility functions related to React.

npm i @cubux/react-utils

Wrap a component to emit deprecation warning.

function deprecated<T extends React.ComponentType<any>>( Origin: T, options?: Options, ): React.ComponentType<React.ComponentProps<T>>

The options object can have the following properties:

A getDevInfo() can be used in development env to get details about deprecation. This can be used on "dev only" internal pages.

Notice: Component's (static) properties like propTypes, defaultProps, etc. are not touched because it was not necessary yet.

Does nothing in production env and returns origin component as is.

See also: DevInfo, getDevInfo().

import { deprecated, getDevInfo } from '@cubux/react-utils'; function OldComponentOrigin() { return <div>...</div>; } const OldComponent = deprecated(OldComponentOrigin, { comment: 'Use `NewComponent` instead.', }); if (process.env.NODE_ENV === 'development') { console.log(getDevInfo(OldComponent)); }

interface DevInfo { type: string; tag?: string; Orig?: React.ComponentType<any>; comment?: string; }

See also: getDevInfo(), setDevInfo().

Get DevInfo for the given generated component.

function getDevInfo<T extends DevInfo = DevInfo>( subject: ComponentType<any>, ): T | undefined

Does nothing in production env and always returns undefined.

An example can be found in deprecated().

See also: setDevInfo().

Set given DevInfo for the given component.

function setDevInfo<T extends DevInfo>( subject: ComponentType<any>, info: T, ): void

Does nothing in production env.

See also: getDevInfo().

Check whether the given element is an element of the given component.

function isElementOf<T extends React.ElementType>( element: any, component: T, ): element is React.ReactElement<React.ComponentPropsWithoutRef<T>, T>

NOTICE: The react-is peer dependency must be installed to use this function.

Enhanced version of isElement() from react-is package to use as Type Guard function.

import { FC, PropsWithChildren } from 'react'; interface FooProps { x: number; y?: string; } const Foo: FC<FooProps> = () => <div />; const element = <Foo x={42} y="foo bar">baz</Foo>; if (isElementOf(element, Foo)) { const { props } = element; // `props` type is `PropsWithChildren<FooProps>` console.log(props); // { x: 42, y: "foo bar", children: "baz" } } console.log(isElementOf(element, 'div')); // => `false` console.log(isElementOf(<div/>, Foo)); // => `false` console.log(isElementOf(<div/>, 'a')); // => `false` console.log(isElementOf(<div/>, 'div')); // => `true`

A React.FunctionComponent component receiving properties for <svg/> element.

type SvgFC = React.FC<React.SVGProps<SVGSVGElement>>

A component of this signature can be given for example with svgo package, which is used internally in CRA react-scripts for SVG files imports like following:

// You are using CRA `react-scripts`, so import { ReactComponent } from './file.svg';

Or writing such component manually:

const MySvg: SvgFC = (props) => ( <svg {...props} width={16} height={16} viewBox="0 0 16 16" fill="currentColor" > <path d="M2,5 h12 v6 z" /> </svg> );

Creates new SvgFC component by reusing origin SvgFC applying a CSS transform.

type CssTransform = string; type CalcTransform = (prev: CssTransform | undefined) => CssTransform; function svgTransform( Orig: SvgFC, transform: CssTransform | CalcTransform, ): SvgFC

A getDevInfo() can be used in development env to get details about underlying transform. This can be used on "dev only" internal pages.

const MySvg: SvgFC = (props) => ( <svg {...props} width={16} height={16} viewBox="0 0 16 16" fill="currentColor" > <path d="M2,5 h12 v6 z" /> </svg> ); const MySvg1 = svgTransform(MySvg, 'scaleX(0.75), rotate(45deg)');

See also: getDevInfo().

Creates new SvgFC applying horizontal flip to origin SvgFC with CSS transform.

function svgFlipH(Orig: SvgFC): SvgFC

Uses svgTransform() internally with 'scaleX(-1)' transform value.

See also: transform(), svgFlipV(), svgRot180().

Creates new SvgFC applying vertical flip to origin SvgFC with CSS transform.

function svgFlipV(Orig: SvgFC): SvgFC

Uses svgTransform() internally with 'scaleY(-1)' transform value.

See also: transform(), svgFlipH(), svgRot180().

Creates new SvgFC applying rotation 180 deg to origin SvgFC with CSS transform.

function svgRot180(Orig: SvgFC): SvgFC

Uses svgTransform() internally with 'rotate(180deg)' transform value.

See also: transform(), svgFlipH(), svgFlipV().

Creates new SvgFC applying rotation 90 deg anti-clockwise to origin SvgFC with CSS transform.

function svgRot90L(Orig: SvgFC): SvgFC

Uses svgTransform() internally with 'rotate(-90deg)' transform value.

See also: transform(), svgRot180().

Creates new SvgFC applying rotation 90 deg clockwise to origin SvgFC with CSS transform.

function svgRot90R(Orig: SvgFC): SvgFC

Uses svgTransform() internally with 'rotate(90deg)' transform value.

See also: transform(), svgRot180().