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.

| Parameter | Default | Description | |-----------|-----------|-------------| | P | unknown | The props the component accepts. |

| Parameter | Type | Description | |-----------|-----------|---------------------| | input | unknown | The input to check. |

Type: input is React.ComponentType<P>

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

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.

| Parameter | Type | Description | |-----------|-----------|---------------------| | input | unknown | The input to check. |

Type: input is React.ReactNode

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

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.

| 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. |

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

Type: React.ReactNode

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

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 [email protected] to disclose any security vulnerabilities.

Made with ☕