Run the following command to start using react-api in your projects:
npm i @alessiofrittoli/react-apior using pnpm
pnpm i @alessiofrittoli/react-apiRun the following to start development
nvm use
pnpm iRun the following
pnpm devThis will generate unminified output code, sourcemaps and will enable source file watcher.
Run the following to create a local production build
pnpm buildThis will generate minified output code without sourcemaps.
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:ciAn HTTP server is then started to serve coverage files from ./coverage folder.
pnpm test:coverage:serveContributions 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.
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.
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>
trueif the giveninputis a React ComponentType.falseotherwise.
Usage
// or
import { isComponentType } from '@alessiofrittoli/react-api/utils'
import { isComponentType } from '@alessiofrittoli/react-api'
const somefunction = (Component: React.ComponentType | React.ReactNode) => {
if (isComponentType(Component)) {
return <Component />
}
return <>{Component}</>
}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
trueif the giveninputis a React Node.falseotherwise.
Usage
// or
import { isReactNode } from '@alessiofrittoli/react-api/utils'
import { isReactNode } from '@alessiofrittoli/react-api'
const somefunction = (Component: React.ComponentType | React.ReactNode) => {
if (isReactNode(Component)) {
return <>{Component}</>
}
return <Component />
}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
'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 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>
)
}
|
|