@alessiofrittoli/react-api v1.0.0

React API ✇

TypeScript React API utilities and Components

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

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.

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 security@alessiofrittoli.it to disclose any security vulnerabilities.

Made with ☕