# react-polybox

> React polymorphic component

Latest version **2.0.1** (published 2024-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-polybox
pnpm add react-polybox
yarn add react-polybox
bun add react-polybox
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-12-18 |
| First published | 2023-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | fipnooone |
| Maintainers | fipnooone |
| Keywords | react, polymorphism, polymorphic, typescript, component |

## Links

- npm: https://www.npmjs.com/package/react-polybox
- Repository: https://github.com/fipnooone/react-polybox
- Issues: https://github.com/fipnooone/react-polybox/issues
- npm.io page: https://npm.io/package/react-polybox

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2024-12-18
- 2.0.0 — 2024-12-18
- 1.0.4 — 2024-12-18
- 1.0.3 — 2024-01-18
- 1.0.2 — 2024-01-18
- 1.0.0 — 2023-12-13
- 0.9.1 — 2023-12-13
- 0.9.0 — 2023-12-13

## README

# react-polybox

React polymorphic box component

## Usage

```tsx
// Button.types.ts
import { PolymorphicComponentProps } from 'react-polybox';
import { ElementType } from 'react';

export interface CustomButtonProps {
    width?: 'fit-content' | 'fill-container';
    transparent?: boolean;
}

export type ButtonProps<T extends ElementType> = PolymorphicComponentProps<T, CustomButtonProps>;
```

```tsx
// Button.tsx
import cn from 'classnames';
import Polybox from 'react-polybox';
import { forwardRef } from 'react-generic-functions';

import S from './Button.module.scss';
import { ButtonProps } from './Button.types';

export const Button = forwardRef(
    <T extends React.ElementType = 'button', E extends HTMLElement = HTMLButtonElement>(
        { className, children, transparent, as, type = 'button', ...props }: ButtonProps<T>,
        ref: React.ForwardedRef<E>
    ) => {
        return (
            <Polybox
                {...props}
                as={(as || 'button') as React.ElementType}
                className={cn(S.Root, { [S.RootTransparent]: transparent }, className)}
                type={type}
                ref={ref}
            >
                {children}
            </Polybox>
        );
    }
);

```

```jsx
// Parent component

import { FC } from 'react';
import Link from 'next/link';

const Page: FC = () => {

    // ...

    return (
        <form>
            <Button>
                Button type button
            </Button>
            <Button type="submit">
                Button type submit
            </Button>
            <Button as="a" href="/example">
                Button as anchor
            </Button>
            <Button as={Link} to="example">
                Button as next/link
            </Button>
        <form>
    );
}
```

---
_Source: https://npm.io/package/react-polybox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._