# jsx-toolkit

> jsx-toolkit

Latest version **1.2.2** (published 2020-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-toolkit
pnpm add jsx-toolkit
yarn add jsx-toolkit
bun add jsx-toolkit
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-09-04 |
| First published | 2020-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ivanjeremic |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/jsx-toolkit
- npm.io page: https://npm.io/package/jsx-toolkit

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) ^0.20.0

## Recent versions

- 1.2.2 (latest) — 2020-09-04
- 1.2.1 — 2020-09-02
- 1.2.0 — 2020-09-02
- 1.1.21 — 2020-09-02
- 1.1.20 — 2020-09-02
- 1.1.19 — 2020-09-02
- 1.1.18 — 2020-09-02
- 1.1.17 — 2020-09-02
- 1.0.17 — 2020-09-02
- 1.0.16 — 2020-09-02
- 1.0.15 — 2020-09-02
- 1.0.14 — 2020-09-02
- 1.0.13 — 2020-09-02
- 1.0.12 — 2020-09-02
- 1.0.11 — 2020-09-02
- … 10 more at https://npm.io/package/jsx-toolkit/versions

## README

# jsx-toolkit

JSX-Toolkit gives you helpful components that will make your code cleaner and easier to maintain.

### Jump to docs

<a href='#map-documentation'>MAP</a>, <a href='#if-documentation'>IF</a>

## MAP Documentation

### Example:

```javascript
import React from 'react';
import { MAP } from 'jsx-toolkit';
import { data } from '../data';

function App() {
  return (
    <MAP el='ul' data={data}>
      {(item, i) => <li key={item.id}>{item.title}</li>}
    </MAP>
  );
}
```

### Example with Component Library:

As you can see you can use native Material-UI props here (disablePadding & dense) and they will work, This allows you to have the same result with fewer lines of code, there is no need to wrap the MAP component with the List component since MAP becomes List thanks to the `el` Prop.

```javascript
import React from 'react';
import { MAP } from 'jsx-toolkit';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { data } from '../data';

function App() {
  return (
    <MAP el={List} data={data} disablePadding='true' dense>
      {(item, i) => <ListItem key={item.id}>{item.title}</ListItem>}
    </MAP>
  );
}
```

#### MAP API:

| Props  | Type                | Default        | Required |
| ------ | ------------------- | -------------- | -------- |
| data   | array or object     | -              | YES      |
| el     | string or Component | React.Fragment | NO       |
| debug  | boolean             | false          | NO       |
| lenght | number              | -              | NO       |

#### MAP API Description

| Props  | Description                                                                                                            |
| ------ | ---------------------------------------------------------------------------------------------------------------------- |
| data   | array or object you want to map                                                                                        |
| el     | `<MAP el="ul"></MAP>` or `<MAP el={List}></MAP>` default is Fragment                                                   |
| debug  | Adding the debug prop will log the data to your console and help you debugging                                         |
| lenght | If your data returns a lot of items but you need less for a preview component maybe? Then use this to shorten the data |

## IF Documentation

### Example:

```javascript
import React from 'react';
import { IF } from 'jsx-toolkit';

function App() {
  return (
    <IF
      condition={2 > 1} // condition
      isTrue={<h3>This is True :)</h3>} // return if true
      isFalse={<h3>This is false!</h3>} // else return this
    />
  );
}
```

#### IF API:

| Props     | Type            | Default | Required |
| --------- | --------------- | ------- | -------- |
| condition | array or object | -       | YES      |
| isTrue    | HTML/JSX        | -       | YES      |
| isFalse   | HTML/JSX        | -       | YES      |

#### IF API Description

| Props     | Description                        |
| --------- | ---------------------------------- |
| condition | Define your condition in this prop |
| isTrue    | this gets returned if true         |
| isFalse   | this gets returned if false        |

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

---
_Source: https://npm.io/package/jsx-toolkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._