Usage
##### Define a Component that render a `FunctionChildren` ```tsx '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
{ childrenFn( children, state ) }
)
}
```
---
##### Use a Component that accepts a `FunctionChildren`
```tsx
'use client'
const Component2: React.FC = () => {
return (
{ ( state ) => {
return (
{/* multiple children accepted too */}
{ ( state ) => {
return (
)
}
```
---
### Development
#### Install depenendencies
```bash
npm install
```
or using `pnpm`
```bash
pnpm i
```
#### Build the source code
Run the following command to test and build code for distribution.
```bash
pnpm build
```
#### [ESLint](https://www.npmjs.com/package/eslint)
warnings / errors check.
```bash
pnpm lint
```
#### [Jest](https://npmjs.com/package/jest)
Run all the defined test suites by running the following:
```bash
# Run tests and watch file changes.
pnpm test:watch
# Run tests in a CI environment.
pnpm test:ci
```
- See [`package.json`](./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.
```bash
test:coverage:serve
```
---
### Contributing
Contributions are truly welcome!
Please refer to the [Contributing Doc](./CONTRIBUTING.md) for more information on how to start contributing to this project.
Help keep this project up to date with [GitHub Sponsor][sponsor-url].
[![GitHub Sponsor][sponsor-badge]][sponsor-url]
---
### 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 ☕
children has access to `state` - { state }
)
} }
children has access to `state` - { state }
)
} }
{ ( state ) => {
return (
multiple children are accepted too
)
} }
Another React.JSX.Element
|
|