# react-pseudo-state

> Stateful pseudo-classes in React.

Latest version **2.2.2** (published 2019-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pseudo-state
pnpm add react-pseudo-state
yarn add react-pseudo-state
bun add react-pseudo-state
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2019-03-08 |
| First published | 2018-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 308.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | jossmac |
| Keywords | react, css, pseudo, pseudo-class, pseudo-state |

## Links

- npm: https://www.npmjs.com/package/react-pseudo-state
- Repository: https://github.com/jossmac/react-pseudo-state
- Homepage: https://jossmac.github.io/react-pseudo-state
- Issues: https://github.com/jossmac/react-pseudo-state/issues
- npm.io page: https://npm.io/package/react-pseudo-state

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.2 (latest) — 2019-03-08
- 2.2.1 — 2018-11-13
- 2.2.0 — 2018-11-13
- 2.1.1 — 2018-10-29
- 2.1.0 — 2018-10-29
- 2.0.1 — 2018-10-29
- 2.0.0 — 2018-10-26
- 1.0.2 — 2018-05-05
- 1.0.1 — 2018-04-30
- 1.0.0 — 2018-04-30

## README

# React Pseudo State

The solution for handling pseudo-states when working with a CSS in JS solution.

[![Build Status](https://travis-ci.org/jossmac/react-pseudo-state.svg?branch=master)](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 }) => (
  <PseudoState>
    {(handlers, snapshot) => (
      <button
        css={{
          background: snapshot.isHover ? 'lightBlue' : 'blue',
          color: snapshot.isActive ? 'slateGray' : 'lightSlateGray',
          outline: snapshot.isFocus && snapshot.focusOrigin === 'keyboard'
            ? '3px dotted blue'
            : null,
        }}
        {...props}
        {...handlers}
      >
        {children}
      </button>
    )}
  </PseudoState>
);
```

A higher-order-component is also provided if that's more your speed:

```jsx
import { withPseudoState } from 'react-pseudo-state';

const ButtonElement = ({ isActive, ...props }) => (
  <button css={{ color: isActive ? 'slateGray' : 'lightSlateGray' }} {...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) => (
  <PseudoState keyboardSupport={props.href ? 'enter' : 'both'}>
    {(handlers, snapshot) => props.href ? <a /> : <button />)}
  </PseudoState>
);
```

### 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<HTMLElement>) => mixed,
  onKeyUp?: (event: SyntheticKeyboardEvent<HTMLElement>) => 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',
};
```

---
_Source: https://npm.io/package/react-pseudo-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._