@types/react-is

What is @types/react-is?

The @types/react-is package provides TypeScript type definitions for the react-is library, which is a collection of utilities to determine the type of React elements. This is particularly useful for type-checking in TypeScript projects when working with dynamic React elements or when needing to assert the type of components or elements in the code.

What are @types/react-is's main functionalities?

Identifying React Elements

This feature allows you to check if a value is a React element. The code sample demonstrates how to use the `isElement` function to determine if a given value is a React element.

import * as ReactIs from 'react-is';

function isElement(element: any): boolean {
  return ReactIs.isElement(element);
}

Checking for Specific Element Types

These functions enable checking if a React element is a Fragment or a Portal, respectively. This is useful for conditional rendering or logic that depends on the type of component.

import * as ReactIs from 'react-is';

function isFragment(value: any): boolean {
  return ReactIs.isFragment(value);
}

function isPortal(value: any): boolean {
  return ReactIs.isPortal(value);
}

Identifying Context Consumers and Providers

This feature allows for the identification of Context Consumers and Providers, which can be useful in complex applications that make heavy use of React's Context API for managing state.

import * as ReactIs from 'react-is';

function isContextConsumer(value: any): boolean {
  return ReactIs.isContextConsumer(value);
}

function isContextProvider(value: any): boolean {
  return ReactIs.isContextProvider(value);
}

Other packages similar to @types/react-is

prop-types

While not a direct alternative, prop-types offers runtime type checking for React props and similar objects. Unlike @types/react-is, which is used for TypeScript type definitions, prop-types is used within JavaScript to ensure components receive props of the correct type.

README

Installation

npm install --save @types/react-is

Summary

This package contains type definitions for react-is (https://reactjs.org/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-is/v17.

index.d.ts

// Type definitions for react-is 17.0
// Project: https://reactjs.org/
// Definitions by: Avi Vahl <https://github.com/AviVahl>
//                 Christian Chown <https://github.com/christianchown>
//                 Sebastian Silbermann <https://github.com/eps1lon>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

// NOTE: Users of the React 18 alpha should add a reference
// to 'react-is/next' in their project. See next.d.ts's top comment
// for reference and documentation on how exactly to do it.

export as namespace ReactIs;

import { ElementType, LazyExoticComponent, MemoExoticComponent, ReactElement } from "react";

export function typeOf(value: any): symbol | undefined;
export function isValidElementType(value: any): value is ElementType;
export function isAsyncMode(value: any): value is ReactElement;
export function isContextConsumer(value: any): value is ReactElement;
export function isContextProvider(value: any): value is ReactElement;
export function isElement(value: any): value is ReactElement;
export function isForwardRef(value: any): value is ReactElement;
export function isFragment(value: any): value is ReactElement;
export function isLazy(value: any): value is LazyExoticComponent<any>;
export function isMemo(value: any): value is MemoExoticComponent<any>;
export function isProfiler(value: any): value is ReactElement;
export function isPortal(value: any): value is ReactElement;
export function isStrictMode(value: any): value is ReactElement;
export function isSuspense(value: any): value is ReactElement;

export const AsyncMode: symbol;
export const ContextConsumer: symbol;
export const ContextProvider: symbol;
export const Element: symbol;
export const ForwardRef: symbol;
export const Fragment: symbol;
export const Lazy: symbol;
export const Memo: symbol;
export const Portal: symbol;
export const Profiler: symbol;
export const StrictMode: symbol;
export const Suspense: symbol;

Additional Details

• Last updated: Wed, 27 Sep 2023 07:12:04 GMT
• Dependencies: @types/react
• Global values: ReactIs

Credits

These definitions were written by Avi Vahl, Christian Chown, and Sebastian Silbermann.