🍷 Klaso

A functional alternative to stateful components in React.

Install

yarn add klaso

Examples

Basic

import klaso from 'klaso'

const MyButton = ({ count, inc }) => <button onClick={inc}>{count}</button>

const MyButtonEnhanced = klaso ({
  state: { count: 5 },
  methods: ctx => ({
    inc: () => ctx.setState({ count: ctx.state.count + 1 })
  })
}) (MyButton)

Using Lifecycles

import klaso from 'klaso'

const MyButton = () => <button>Click me</button>

const MyButtonEnhanced = klaso({
  methods: ctx => ({
    componentDidMount: () => console.log('mounted'),
    componentDidUpdate: (prevProps, prevState, snapshot) => console.log(snapshot),
    getSnapshotBeforeUpdate: (prevProps, prevState) => console.log(prevProps, prevState),
  }),
  staticMethods: {
    getDerivedStateFromProps: (props, state) => console.log(props) || null,
  },
})(MyButton)

Changelog

• v.1.2.1 -- Dec 5, 2018
  • Added init function that runs in the constructor
• v.1.2.0 -- Sept 16, 2018
  • Fixed error "Cannot call class as a function" error when composing multiple HOC's
  • Fix display names for stack traces and react dev tools
  • New feature to override display names by passing it through the config as displayName