State.md

State

Using State you can get/set special states for specific components.

Warning: This only applies to elements that provide an explicit key or ref expect the root node which gets root applied if there's no key or ref set.

Usage

import {Look, State} from 'react-look/dom'

@Look
class Header extends React.Component {
  render(){
    <div>
      <span look={styles} key="first">First</span>
      <span look={styles} key="second">Second</span>
    </div>
  }
}

const styles = StyleSheet.create(Header, {
  ':active': {
    backgroundColor: 'red'
  },
  ':hover': {
    backgroundColor: 'blue'
  }
})

// returns the state as a boolean
State.getState('hover', Header, 'second')
State.getState('active', Header, 'first')

react-look/dom specific action states

• hover
• focus
• active

Methods

• add
• get
• set
• has
• getState
• setState
• hasState

add(container [, key])

Adds a new element reference by key to the state map.

get(container [, key])

Returns a whole state map for a specific key.

set(states, container [, key])

Sets a whole new states map for a given key.

has(container [, key])

Checks if a key has already been added.

getState(state, container [, key])

Returns a key's current state.

setState(state, value, container [, key])

Sets a key's state with a new value.

hasState(state, container [, key])

Checks if a state has already been assigned for a key.