@nonnontrivial/react-vfd NPM

react-vfd

👁 Keyboard-navigable React components for images

overview and ethos

Inspired by, and modaled after 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.

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>
    )
  }
}