jsx-toolkit

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

Jump to docs

MAP, IF

MAP Documentation

Example:

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.

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:

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 |