open-index/open-npm huggingface dataset:
npm package: @nonnontrivial/calendar
Description: simple, selectable dates for React
Author: Kevin Donahue
Latest version: 0.5.0

# calendar

> simple, selectable dates for React

requires the following:

```
react@latest react-dom@latest
```

## Installation

```
npm i -S @nonnontrivial/calendar
```

## An Example

```js
import { DateContext, MonthCycler, Calendar } from '@nonnontrivial/calendar';

function Sundial(props) {
  let [timeString, setTimeString] = React.useState(null);
  let onChange = React.useCallback(date => {
    setTimeString(date.toTimeString());
  }, []);
  return (
    <React.Fragment>
      <marquee>{timeString}</marquee>
      <DateContext.Provider value={{ onChange }}>
        <MonthCycler />
        <Calendar />
      </DateContext.Provider>
    </React.Fragment>
  );
}
```
npm package: @nonnontrivial/react-vfd
Description: 👁 Keyboard-navigable React components for images
Author: Kevin Donahue
Latest version: 0.3.0

# react-vfd

> 👁 Keyboard-navigable React components for images

## overview and ethos

Inspired by, and modaled after [reach-ui](https://github.com/reach/reach-ui),
react-vfd offers a set of components for keyboard-navigable image showcasing.

It's early days, and this is primarily built for a personal project (the scope
of which is uncertain), but the gist of using this can be grokked below.

`isOpen`, `entities`, and `onDismiss` are the only required props.

```js
import { Lightbox } from '@nonnontrivial/react-vfd'

export class Viewer extends React.Component {
  state = {
    isOpen: false,
    entities: [
      { src: 'https://www.tarsnap.com/images/header.png', caption: 'tars' }
    ]
  };

  buttonRef = React.createRef();

  render() {
    const { isOpen, entities } = this.state
    return (
      <React.Fragment>
        <button
          ref={this.buttonRef}
          onClick={() => {
            this.setState(prevState => (
              isOpen: !prevState.isOpen
            ))
          }}
        >
          toggle
        </button>
        <Lightbox
          isOpen={isOpen}
          entities={entities}
          initialFocusRef={this.buttonRef}
          styles={{ modal: { background: 'rgba(5, 6, 17, 0.95)' } }}
          onCycle={({ src }) => {
            console.log(src)
          }}
          onDismiss={() => {
            this.setState({ isOpen: false })
          }}
        />
      </React.Fragment>
    )
  }
}
```

## installation

```console
yarn add @nonnontrivial/react-vfd
```

## license

MIT © [Kevin Donahue](https://github.com/nonnontrivial)