revskill10 / klaso

🍷 A functional alternative to creating stateful React components

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