# @bithero/react-helpers

> React helpers

Latest version **1.1.3** (published 2024-06-26) · AGPL-3.0-or-later license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @bithero/react-helpers
pnpm add @bithero/react-helpers
yarn add @bithero/react-helpers
bun add @bithero/react-helpers
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2024-06-26 |
| First published | 2022-07-16 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mai-lapyst |
| Keywords | front-end, react, react-helpers, ecosystem-react |

## Links

- npm: https://www.npmjs.com/package/@bithero/react-helpers
- Repository: https://codearq.net/bithero-js/react-helpers
- Issues: https://codearq.net/bithero-js/react-helpers/issues
- npm.io page: https://npm.io/package/@bithero/react-helpers

## 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

- 1.1.3 (latest) — 2024-06-26
- 1.1.2 — 2023-10-14
- 1.1.1 — 2023-10-14
- 1.0.0 — 2022-07-16

## README

# react-helpers

[![Npm package version](https://badgen.net/npm/v/@bithero/react-helpers)](https://npmjs.com/package/@bithero/react-helpers) [![Npm package license](https://badgen.net/npm/license/@bithero/react-helpers)](https://codearq.net/bithero-js/react-helpers/src/branch/master/LICENSE) [![Npm package types](https://badgen.net/npm/types/@bithero/react-helpers)](https://npmjs.com/package/@bithero/react-helpers)

Collection of usefull functions, hooks, and so on to aid development of react based apps.

## License

This project is licensed under AGPL-3.0. See the `LICENSE` file for more informations.

## Usage

### classNames

```ts
import { classNames } from '@bithero/react-helpers';

/*
    The `classNames()` helper function aids in programatic "generation" of html/css classnames
    by providing an simple way to use the ternary operator to switch between classnames.
*/
classNames([ "some-class", true  ? "visible": null ]);  // ==> "some-class visible"
classNames([ "some-class", false ? "visible": null ]);  // ==> "some-class"
```

### useControlled

```ts
import { useControlled } from '@bithero/react-helpers';

/*
    With `useControlled()` one can build components that are either controlled or uncontrolled:
*/
interface IMySelectProps extends React.HTMLAttributes<HTMLElement> {
    selection?: string
    onSelectionChange?(selection: string)
}

export const MySelect = ({ selection: controlledSelection, onSelectionChange }: IMySelectProps) => {

    // useControlled() uses useState() internally, but only if `controlled` is not `undefined`;
    const [ selection, setSelection ] = useControlled<string>({
        controlled: controlledSelection,
        default: null,
        name: 'MySelect.selection'
    });

    const isControlled = controlledSelection !== undefined;

    const changeSelection = (selection: string) => {
        if (!isControlled) {
            setSelection(selection);
        }
        onSelectionChange?.(selection);
    }

    return ( /* ... */ );
}


```

### hookAware callbacks

```tsx
import { IHookAware, createHookAware, CallbackOrHookAware, setupHookAware, runHookAware } from '@bithero/react-helpers';

export function MyComponent({ cb }: { cb: CallbackOrHookAware<(a: number, b: number) => number> }) {
    const hookValues = setupHookAware(cb);

    useEffect(() => {
        var c: number = runHookAware(cb, hookValues, 5, 12);
    }, [cb, hookValues])

    return (<div></div>);
}

export function MyOtherComponent() {
    const handler: IHookAware<(a: number, b: number) => number> = createHookAware(
        {'zState': [useState, 0]},
        function (a, b) {
            const [z, setZ] = this.zState;
            return a + b;
        }
    );
    return (<MyComponent cb={handler}/>);
}

export function MyThirdComponent() {
    const handler = (a: number, b: number) => (a + b);
    return (<MyComponent cb={handler}/>);
}
```

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