# kamamana
> Higher Order Custom HTML React Components, useful for personal projects
Latest version **0.0.4** (published 2019-01-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install kamamana
pnpm add kamamana
yarn add kamamana
bun add kamamana
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-01-23 |
| First published | 2018-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 116.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Subroto Biswas |
| Maintainers | shub1493 |
| Keywords | reactjs, react, javascript, css-in-js, components, design, component, ui, framework, frontend |
## Links
- npm: https://www.npmjs.com/package/kamamana
- Repository: https://github.com/willofindie/kamamana
- Homepage: https://github.com/willofindie/kamamana#readme
- Issues: https://github.com/willofindie/kamamana/issues
- npm.io page: https://npm.io/package/kamamana
## Dependencies (2)
- [nano-css](https://npm.io/package/nano-css.md) ^3.5.0
- [memoize-one](https://npm.io/package/memoize-one.md) ^5.0.0
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads
## Recent versions
- 0.0.4 (latest) — 2019-01-23
- 0.0.3 — 2019-01-01
- 0.0.2 — 2018-12-31
- 0.0.1 — 2018-12-31
## README
# Kamamana - Designed ReactJS Components
[](https://www.npmjs.com/package/kamamana)
[](https://bundlephobia.com/result?p=kamamana)
[](https://github.com/prettier/prettier)
[](https://github.com/eslint/eslint)
[](https://github.com/facebook/flow/)
> 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](https://github.com/streamich/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](https://github.com/zeit/styled-jsx)(5kb at-max), but it was a real pain to make it work with storybook.
## 🖥 Environment Support
- Mordern Brower support only.
## 📦 Installation
```bash
npm install kamamana --save
```
## 🔨 Usage
```jsx
import { Button, Card, Flexbox, KamamanaProvider } from 'kamamana';
/* ... */
// Wrap your React App with KamamanaProvider for custom theme
const App = props => {/* App Children */};
// 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)...
```js
import { nano, rule, jsx } from 'kamamana';
```
For details on `jsx` addon usage, check out [Addon JSX](https://github.com/streamich/nano-css/blob/master/docs/jsx.md)
## ⌨️ Development
Uses [storybook](https://github.com/storybooks/storybook) for development
```bash
$ git clone git@github.com:willofindie/kamamana.git
$ cd kamamana
$ npm install
$ npm run storybook
```
Open your browser and visit http://127.0.0.1:9001
---
_Source: https://npm.io/package/kamamana · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._