https://github.com/jossmac/react-pseudo-state
🎛 Stateful pseudo-classes in React
https://github.com/jossmac/react-pseudo-state
css-in-js pseudo-classes react
Last synced: over 1 year ago
JSON representation
🎛 Stateful pseudo-classes in React
- Host: GitHub
- URL: https://github.com/jossmac/react-pseudo-state
- Owner: jossmac
- License: mit
- Created: 2018-04-30T05:30:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-08T08:09:51.000Z (over 7 years ago)
- Last Synced: 2025-02-26T19:46:52.837Z (over 1 year ago)
- Topics: css-in-js, pseudo-classes, react
- Language: JavaScript
- Homepage: https://jossmac.github.io/react-pseudo-state
- Size: 199 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Pseudo State
The solution for handling pseudo-states when working with a CSS in JS solution.
[](https://travis-ci.org/jossmac/react-pseudo-state)
### Install
```bash
yarn add react-pseudo-state
```
### Use
```jsx
import { PseudoState } from 'react-pseudo-state';
const Button = ({ children, ...props }) => (
{(handlers, snapshot) => (
{children}
)}
);
```
A higher-order-component is also provided if that's more your speed:
```jsx
import { withPseudoState } from 'react-pseudo-state';
const ButtonElement = ({ isActive, ...props }) => (
);
export const Button = withPseudoState(ButtonElement);
```
### Keyboard support
The native browser behaviour is that `Enter` is for anchors and buttons, whilst `Space` is only called on buttons. To stay compliant it's recommended to dynamically populate the `keyboardSupport` property.
The shape of `keyboardSupport` is described below in the [Types section](#types). It will default to `'auto'`, which sniffs the event target for a node type.
```jsx
import { PseudoState } from 'react-pseudo-state';
const Button = (props) => (
{(handlers, snapshot) => props.href ? : )}
);
```
### Types
The first argument to the `children` function is an object of handlers, which must be spread onto the node returned from `children`:
```jsx
type Handlers = {
onBlur: () => mixed,
onFocus: () => mixed,
onKeyDown?: (event: SyntheticKeyboardEvent) => mixed,
onKeyUp?: (event: SyntheticKeyboardEvent) => mixed,
onMouseDown: () => mixed,
onMouseEnter: () => mixed,
onMouseLeave: () => mixed,
onMouseUp: () => mixed,
onTouchEnd: () => mixed,
onTouchStart: () => mixed,
};
```
The second argument is the snapshot, or current state of the element:
```jsx
type Snapshot = {
focusOrigin: null | 'keyboard' | 'mouse',
isActive: boolean,
isFocus: boolean,
isHover: boolean,
};
```
The actual `PseudoState` component only has two properties:
```jsx
type Props = {
children: (Handlers, Snapshot) => React$Node,
keyboardSupport: 'auto' | 'enter' | 'space' | 'both' | 'none',
};
```