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