mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
7a69fdd469
## 📓 Summary
This work is just the extraction of a utility hook implemented in the
`infra` plugin for re-usability, as there are some scenarios where it
becomes handy in the logs explorer plugin too.
For improved reusability in future, I extracted the useBoolean hook into
a react-hooks package, where additional stateful utility hooks can go in
future.
This also replaces the current usage of the hook in the `infra` plugin
and is used to refactor part of the logs_explorer top nav.
---------
Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
|
||
|---|---|---|
| .. | ||
| src/use_boolean | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
@kbn/react-hooks
A utility package, @kbn/react-hooks, provides custom react hooks for simple abstractions.
Custom Hooks
useBoolean
Simplify handling boolean value with predefined handlers.
function App() {
const [value, { on, off, toggle }] = useBoolean();
return (
<div>
<EuiText>
The current value is <strong>{value.toString().toUpperCase()}</strong>
</EuiText>
<EuiFlexGroup>
<EuiButton onClick={on}>On</EuiButton>
<EuiButton onClick={off}>Off</EuiButton>
<EuiButton onClick={toggle}>Toggle</EuiButton>
</EuiFlexGroup>
</div>
);
}