preact-smitty

Preact bindings for smitty

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
preact-smitty
2.0.05 years ago6 years agoMinified + gzip package size for preact-smitty in KB

Readme

preact-smitty
npm version Build Status codecov
Preact bindings for smitty
npm install -S preact-smitty

Basics

const Title = track(
  // action type to update state on
  'ui/RESIZE',
  // key to pass as prop
  'screen',
  // select the value of 'screen' when the action is emitted
  state => state.ui.screen,
  // shouldTrackerUpdate = () => true
  (state, props, type, payload) => payload !== state.ui.screen
)(
  ({ screen, children }) =>
    screen < MEDIUM_SCREEN ? <h3>{children[0]}</h3> : <h1>{children[0]}</h1>
)

let mapStateToProps = (state, { id }) => {
  return {
    room: state.rooms[id]
  }
}
const Room = connect(mapStateToProps)(
  class Room extends Component {
    render ({ room = {} }) {
      console.log(room) // logs { id: '1', ... }
      return <Title>room.title</Title>
    }
  }
)

render(
  <Provider store={store}>
    <Room id={'1'}
  </Provider>,
  document.body
)

Demos (v2)

Demos (v1)

  • Basic
Map as state Immutable.Map as state
  • Async
Fetch api with Immutable.Map as state
  • Fun
UI colors with Immutable.Map as state UI colors with custom class as state Scroll sync