Run the following command to start using react-api in your projects:
npm i @alessiofrittoli/react-apior using pnpm
pnpm i @alessiofrittoli/react-apiCheck 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
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 }</>
)
}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
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 />
)
}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>
)
}npm installor using pnpm
pnpm iRun the following command to test and build code for distribution.
pnpm buildwarnings / errors check.
pnpm lintRun 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.jsonfile scripts for more info.
Run tests with coverage.
An HTTP server is then started to serve coverage files from ./coverage folder.
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.
|
|