@alessiofrittoli/react-api

React API ✇

TypeScript React API utilities

Table of Contents

• Getting started
• API Reference
  • Utilities
• Development
  • Install depenendencies
  • Build the source code
  • ESLint
  • Jest
• Contributing
• Security
• Credits

Getting started

Run the following command to start using react-api in your projects:

npm i @alessiofrittoli/react-api

or using pnpm

pnpm i @alessiofrittoli/react-api

API Reference

Utilities

isComponentType

Check if the given input is a React ComponentType.

Type Parameters

Parameter	Default	Description
P	unknown	The props the component accepts.

Parameters

Parameter	Type	Description
input	unknown	The input to check.

Returns

Type: input is React.ComponentType<P>

• true if the given input is a React ComponentType.
• false otherwise.

Usage

import { isComponentType } from '@alessiofrittoli/react-api'
// or
import { isComponentType } from '@alessiofrittoli/react-api/utils'

const somefunction = ( Component: React.ComponentType | React.ReactNode ) => {

 if ( isComponentType( Component ) ) {
  return <Component />
 }

 return (
  <>{ Component }</>
 )

}

isReactNode

Check if the given input is a React Node.

Parameters

Parameter	Type	Description
input	unknown	The input to check.

Returns

Type: input is React.ReactNode

• true if the given input is a React Node.
• false otherwise.

Usage

import { isReactNode } from '@alessiofrittoli/react-api'
// or
import { isReactNode } from '@alessiofrittoli/react-api/utils'

const somefunction = ( Component: React.ComponentType | React.ReactNode ) => {

 if ( isReactNode( Component ) ) {
  return <>{ Component }</>
 }

 return (
  <Component />
 )

}

childrenFn

Render children which could be possible a callable function.

Type Parameters

Parameter	Default	Description
T	FunctionChildren<U>	The children type which extends the FunctionChildren<U> interface.
U	unknown[]	An Array defining optional arguments passed to the children function.

Parameters

Parameter	Type	Description
children	T	The children to render.
args	U	(Optional) Arguments passed to children if is a function.

Returns

Type: React.ReactNode

The rendered children. If children is a function, the result of that function is returned.

Usage

Define a Component that render a FunctionChildren

'use client'

import { useState } from 'react'
import { childrenFn, type FunctionChildren } from '@alessiofrittoli/react-api'
// or
import { childrenFn, type FunctionChildren } from '@alessiofrittoli/react-api/utils'

interface ComponentProps
{
  children?: FunctionChildren<[ state: boolean ]>
}

const Component: React.FC<ComponentProps> = ( { children } ) => {

  const [ state, setState ] = useState( false )

  return (
    <div>
      { childrenFn( children, state ) }
    </dib>
  )
}

Use a Component that accepts a FunctionChildren

'use client'

const Component2: React.FC<ComponentProps> = () => {

  return (
    <div>
      <Component>
        { ( state ) => {
          return (
            <div>children has access to `state` - { state }</div>
          )
        } }
      </Component>
      {/* multiple children accepted too */}
      <Component>
        { ( state ) => {
          return (
            <div>children has access to `state` - { state }</div>
          )
        } }
        { ( state ) => {
          return (
            <div>multiple children are accepted too</div>
          )
        } }
        <div>Another React.JSX.Element</div>
      </Component>
    </div>
  )
}

Development

Install depenendencies

npm install

or using pnpm

pnpm i

Build the source code

Run the following command to test and build code for distribution.

pnpm build

ESLint

warnings / errors check.

pnpm lint

Jest

Run all the defined test suites by running the following:

# Run tests and watch file changes.
pnpm test:watch

# Run tests in a CI environment.
pnpm test:ci

• See package.json file scripts for more info.

Run tests with coverage.

An HTTP server is then started to serve coverage files from ./coverage folder.

⚠️ You may see a blank page the first time you run this command. Simply refresh the browser to see the updates.

test:coverage:serve

Contributing

Contributions are truly welcome!

Please refer to the Contributing Doc for more information on how to start contributing to this project.

Help keep this project up to date with GitHub Sponsor.

Security

If you believe you have found a security vulnerability, we encourage you to responsibly disclose this and NOT open a public issue. We will investigate all legitimate reports. Email [e-mail] to disclose any security vulnerabilities.

Made with ☕

Alessio Frittoli https://alessiofrittoli.it | [e-mail]