Guide

• About
• Why do you need it
• Usage
• Instalation
• General props
• General options
• General props in Block
• All components
  • ArrayBlock
    • Meaning
    • Props
    • Options
  • ArrayManyBlock
    • Meaning
    • Props
    • Options
• JavaScript support

About

"JSX-array-iteration" is a package that will help you with your refactoring path. This is time saver in simple words. This package will give you two components. With them you can wrap your React-component or just put it in your code. The Package will iterate over it that times that you specify.

Why?

As a developer i often use array.map or for loop in my JSX-code. In order to avoid duplicating my code, i usually create a component that will take React component and data with and will iterate over it. Then in output will be returned React components with data in this component multyply times.

Usage

<ArrayBlock staticValue={staticArray} Block={<YourComponent/>} times={3} props={yourprops}>Childrens</ArrayBlock>
<ArrayManyBlock staticValue={staticArray} Block={[<YourComponent/>, <YourSecondComponent/>]} props={yourprops}>Childrens</ArrayBlock>

Instalation

| Way to install | command | version | | ------------- |:-------------:| -----:| | NPM | npm i jsx-array-iteration.commonjs | commonJS | | NPM | npm i jsx-array-iteration.ecmajs | ecmaJS | | YARN | - | |

General props

Props will help you to tell the "JSX-array-iteration" package how it should work.

• Block

Tells the package exactly what should be returned. (Сan be an array in ArrayManyBlock component).

Examples:

<ArrayBlock Block={<YourComponent/>} times={1}>Childrens</ArrayBlock>
<ArrayManyBlock Block={[<YourComponent/>, <YourSecondComponent]}>Childrens</ArrayBlock>

In Block will be passed props from "JSX-array-package".

more about that props

Raleted otpions [✓]

• props

Props that will be passed to your React-component as props, that you specify in Block prop.

Example of data that can be passed in props:

const obj = {{style: {marginTop: '20px'}}}

Raleted otpions [X]

• startWithIndex

Tells the package exactly at which index package has to start iterate over.

Raleted otpions [X]

• staticValue

Data that will be passed to the Block prop by index from the loop.

Some examples of data that can be passed:

const staticArr = [
  {name: ['hi', 'bye']},
  {second: ['this is welcome', 'this is goodBye']}

];
const staticArr = [
  {name: ['hi', 'bye'], id: 2},
  {second: ['this is welcome', 'this is goodBye']}
];
const staticObj = {
  name: ['hi', 'bye'],
  second: ['this is welcome', 'this is goodBye']
};

const staticObj = {
  name: ['hi', 'bye'],
  second: ['this is welcome', 'this is goodBye'],
};
const staticArr = [
'2', '5'
];
const staticArr = [
  [2,5], [2,5,6]
  ];

Raleted otpions [✓]

• children

Children that will be passed to the React component as children element.

Raleted otpions [X]

• options

more about options

ArrayBlock has more props than listed in the general options section.

more about ArrayBlock props

General Options

Options is a statement that will tell "JSX-Array-iteration" package how it supposed to work.

• indexForJSX (default is true)

When it is marked as true, then it will take the index from loop and by index take staticValue data and after ""JSX-array-pacakge"" will return a React-component with prop in there that called neededCurrent where will be holded staticValue data by index from loop. Example:

const staticValue = [2,5,6]; // indexForJSX is true

output

console.log(neededCurent, neededIndex) // ==> (2,0)...(5,1)...(6,2)

If it is marked as false, then it will return data from staticValue all by index. Example:

const staticValue = [[2,5], [3,5], [4,8]; // indexForJSX is false

output

console.log(neededCurent, neededIndex) // ==> (2,0)...(3,0)...(4,0)....(5,1)....(5,1)....(8,1)

more about props that is passed in Block props by "JSX-array-pacakge"

• key
  • searchKey
  • arr

tells "JSX-array-package" to make React-component with key that you passed.

arr - array of keys, that will be take by index from "JSX-array-package" loop and passed into Block by index.

searchKey - string that "JSX-array-package" will trying to find in staticValue.

Example:

const options = {key: searchKey: "key"};
const staticValue = [[2, {key: 2}], [5, {key: 3}]];
<ArrayManyBlock options={options} staticValue={staticValue} Block={<YourComponent/>}/>

output

root.render(
<>
  <YourComponent/> // ==> key is 2
  <YourComponent/> // ==> key is 3
</>
)

• fun

after every iterate it will call function from "fun".

ArrayManyBlock has more options than listed in the general options section.

more about ArrayManyBlock options

General props in Block component props.

Props that will be passed by "JSX-array-package" into Block component.

• neededCurrent

data that will be passed from staticValue by index.

• neededIndex

index from loop that iterate over your React-component.

• props

props that you specify in props statement.

• children

children that you specify in children statement.

All components

ArrayBlock

Meaning

Return only one React component that times you specify.

Props

• times

tells ArrayBlock how many times ArrayBlock should iterate (return Block statement).

Options

ArrayBlock component doesnt have any special options that not included in General Options

ArrayManyBlock

Meaning

Return only one OR two and more React comnponents that times you specify.

Props

ArrayManyBlock doesnt have any special props that not included in General Props

Options

• priority

• renderTimes
  • searchTimes
  • arr

tells ArrayManyBlock how many times each React-component in Block array statement should be returned.

arr - array of numbers, that will be take by index from "JSX-array-package" loop.

searchTimes - string that "JSX-array-package" will trying to find in staticValue.

Example:

const options = {renderTimes: searchTimes: "times"};
const staticValue = [[2, {times: 2}], [5, {times: 1}]];
<ArrayManyBlock options={options} staticValue={staticValue} Block={[<YourComponent/>, <YourSecondComponent/>]}/>

output

root.render(
<>
  <YourComponent/>
  <YourComponent/>
  <YourSecondComponent/>
</>
)

JavaScript support

This package has two version of JavaScript. CommonJS and EcmaJS.

EcmaScript

CommonJS