2.2.13 • Published 1 year ago
@nature-ui/clickable v2.2.13
@nature-ui/clickable
React hook that implements all the interactions of a native button
component
with support for making it focusable even if it's disabled.
It can be used with both native button elements or other elements (like div
).
Installation
import { useClickable } from '@nature-ui/clickable';
Usage
// create a clickable primitive
const Clickable = (props) => {
const clickable = useClickable(props);
return <button display='inline-flex' {...clickable} />;
};
// use the clickable primitive
const Example = () => (
<Clickable isDisabled isFocusable>
{({ disabled, 'aria-disabled': Disabled }: ClickableProps) => {
return (
<span
style={{
opacity: disabled || Disabled ? 0.5 : 1,
pointerEvents: disabled || Disabled ? 'none' : 'initial',
}}
>
Clickable
</span>
);
}}
</Clickable>
);
0.0.0-dev-20230409201910
1 year ago
0.0.0-dev-20230301120121
1 year ago
2.2.1
1 year ago
2.2.0
1 year ago
0.0.0-dev-20230410131720
1 year ago
2.2.13
1 year ago
2.2.11
1 year ago
2.2.12
1 year ago
0.0.0-dev-20230410162901
1 year ago
0.0.1
1 year ago
0.0.0
1 year ago
0.0.0-dev-20230409203337
1 year ago
0.0.0-dev-20230409203113
1 year ago
0.0.0-dev-20230411071731
1 year ago
0.0.0-dev-20230301133840
1 year ago
0.0.0-dev-20221217102739
1 year ago
0.0.0-dev-20221225195604
1 year ago
0.0.0-dev-20221225100930
1 year ago
0.0.0-dev-20221218114655
1 year ago
2.0.3-alpha.0
2 years ago
0.0.0-dev-20221025095017
2 years ago
2.0.2
2 years ago
0.0.0-dev-20221025084126
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.2.0
3 years ago
0.1.1-alpha.4
3 years ago
0.1.1-alpha.3
3 years ago
0.1.1-alpha.2
3 years ago
0.1.1-alpha.1
3 years ago
0.1.1-alpha.0
3 years ago