Guard
The <Guard>
component is a ... .
Installation
> npm install --save @paprika/guard
or
> yarn add @paprika/guard
Usage
React <16.8.x
import Guard from "@paprika/guard";
function App() {
function doClose() {}
return (
<Guard.Supervisor>
<Guard.Connector isDirty />
<Guard.Gatekeeper>{canLeave => <button onClick={() => canLeave() && doClose()}>Close</button>}</Guard.Gatekeeper>
</Guard.Supervisor>
);
}
React >=16.8.x
import Guard from "@paprika/guard";
function MyComponent() {
const canLeave = Guard.useGuard(); // a hook
const isDirty = React.useState(false);
function doClose() {}
return (
<div>
<Guard.Connector isDirty={isDirty} />
<button onClick={() => canLeave() && doClose()}>Close</button>
</div>
);
}
function App() {
return (
<Guard.Supervisor>
<MyComponent />
</Guard.Supervisor>
);
}
Props
// TODO
a11yText
canPropagate
-
children
(required) hasInsetFocusStyle
isDisabled
-
onClick
(required) tabIndex
role