DEV Community

Cover image for KAMPONENT
alireza valizade
alireza valizade

Posted on โ€ข Edited on

4 2

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

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay