jsx-toolkit v1.2.2

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:

MAP API Description

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:

IF API Description