DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for KAMPONENT
alireza valizade
alireza valizade

Posted on • Updated on

KAMPONENT

If you like this library please click on the start button on github.
https://github.com/cooldrip/komponent

kamponent

a component for creating react components πŸƒ

This library is not released yet

Installation

npm:

npm install kamponent --save
Enter fullscreen mode Exit fullscreen mode

yarn:

yarn add kamponent
Enter fullscreen mode Exit fullscreen mode

Example 1

<Kamponent pure initialState={{ count: 0 }}>
    {({ state, setState }) => {
        return (
            <div>
                <h3>{state.count}</h3>
                <button onClick={() => setState({ count: state.count + 1 })}>+</button>
                <button onClick={() => setState({ count: state.count - 1 })}>-</button>
            </div>
        );
    }}
</Kamponent>
Enter fullscreen mode Exit fullscreen mode

Example 2

<Kamponent>
    {({ props }) => {
        return (
            <div>
                <h3>{props.count}</h3>
                <button onClick={() => props.increment()}>+</button>
                <button onClick={() => props.decrement()}>-</button>
            </div>
        );
    }}
</Kamponent>
Enter fullscreen mode Exit fullscreen mode

props

Property Type Working
children function or array or object Yes
initialState object Yes
pure bool Yes
didMount function Yes
didCatch function Yes
willUnmount function Yes
shouldUpdate function Yes
didUpdate function Yes
snapshotBeforeUpdate function Yes

params in functions

note: you can access to this parameters from functions and children (if it be function).
Property Type Working
state any Yes
props any Yes
setState function Yes
forceUpdate function Yes

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.