kamamana

Kamamana - Designed ReactJS Components

Designed ReactJS Components for personal use.

Set of High-Order HTML Elements as React Components, with default theme set for them, which can also be customized to any extent required, keeping the bundle size for the project using this library small.

• All the current up-to-date list of supported components can be found here in ./src/components

Main purpose of this library is to use latest CSS properties (like flex box etc.), without the thought of supporting old browsers, removing use of browser prefixes, thus keeping library (with current set of components) size small.

I am hoping to keep it under 15Kb - 20Kb at-max with all basic components and dependencies included. Currently it has it's own icons present for testing, will later on remove them to reduce the size even more.

📦 Dependencies:

Just one small CSS-to-JS dependency, for creating components:

• nano-css (0.5Kb + addon Sizes)

PROS:

• Small and flexible 5th gen CSS-to-JS module.
• Allows addons to levitate, various features of CSS-to-JS
• Helps in keeping our own libraries using it, small and precise, with help of some modules.

CONS:

• This library is very new in terms of other, so no gaurantee when the dev might stop working on it
• Could have used styled-jsx(5kb at-max), but it was a real pain to make it work with storybook.

🖥 Environment Support

• Mordern Brower support only.

📦 Installation

npm install kamamana --save

🔨 Usage

import { Button, Card, Flexbox, KamamanaProvider } from 'kamamana';

/* ... */

// Wrap your React App with KamamanaProvider for custom theme
const App = props => <KamamanaProvider kTheme={theme}>{/* App Children */}</KamamanaProvider>;

// Else, Use App as is, to use the default theme...
const App = props => {
  /* App Render */
};

This library also exposes the internal nano-css css-in-js engine (only used addons and nano, for now it's just jsx, rule), for custom use, which helps in re-using the library, whitout any custom css-in-js dependency, making overall parent project bundle size small (if used)...

import { nano, rule, jsx } from 'kamamana';

For details on jsx addon usage, check out Addon JSX

⌨️ Development

Uses storybook for development

$ git clone [e-mail]:willofindie/kamamana.git
$ cd kamamana
$ npm install
$ npm run storybook

Open your browser and visit http://127.0.0.1:9001