Collection of usefull functions, hooks, and so on to aid development of react based apps.
This project is licensed under AGPL-3.0. See the LICENSE
file for more informations.
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"
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 ( /* ... */ );
}
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}/>);
}