Skip to content

Development component for connecting stateless components to an array of states

Notifications You must be signed in to change notification settings

segment-boneyard/react-pure-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-pure-ui

Development component for connecting stateless components to an array of states

This should not be used in production

Example

import React from 'react'
import { render } from 'react-dom'
import { pure } from 'react-pure-ui'

const Component = (props) => <h1>{props.children} fish</h1>

const states = [
  { children: 'one' },
  { children: 'two' },
  { children: 'red' },
  { children: 'blue' }
]

const PureComponent = pure('unique-key-for-component', states)(Component)

render(<PureComponent />, document.getElementById('root'))

Usage

pure(key, states)(Component)

Connects a stateless component to an array of possible states, allowing keyboard navigation through states with ← and →. Any props passed in will be merged with the active state with the latter taking precedence.

Key commands

  • Left Arrow – navigate to the previous state
  • Right Arrow – navigate to the next state
  • Escape – turn off pure-ui state, passing through props rather than using states.

License

MIT

About

Development component for connecting stateless components to an array of states

Resources

Stars

Watchers

Forks

Packages

No packages published