0.0.10 • Published 1 year ago

react-array v0.0.10

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

React Array 🚀

Tired of writing your React lists in multiple lines with clunky syntax? 😤 Introducing React Array! 🚀 Say goodbye to tedious list formatting and hello to streamlined efficiency. With React Array, coding lists is as simple as a single line of code! 😎 .

Features :

  • 💡 Write your lists in one single line
  • 💪 Helps you make your code cleaner and more readable

Getting Started

npm i react-array

Basic Usage

import "./mycontainer.css";
import { ReactArr } from "react-array";

// Define a separate functional component
  // if you are using normal array
const HelloComponent = ({ e }) => (
  <div>
    <p>{e}</p>
  </div>
);
  // If you are using an array with objects, the keys in your component must match the keys in your array.
const TestComponent = ({ type,value }) => (
  <div>
    <p>{type}</p>
    <p>{value}</p>
  </div>
);

export default function MyContainer() {

  // if you are using normal array
  cont arr = ["one", "two", "three"];

  // If you are using an array with objects, the keys in your component must match the keys in your array.
  cont arr = [{type:"normal text",value:"one},
              {type:"anything",value:"two"},
              {type:"just number",value:"three"}];

  return (
    <>
      <main>
        <h1>Title</h1>
        <ul role="list">
          <ReactArr arr={arr} Component={TestComponent} />
        </ul>
      </main>
    </>
  );
}

Props

PropsDefaultDescription
arrarray
ComponentA component that will be used to render each item in the passed array
listRolelistitemli role value

License

MIT.

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.1

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.1.1

4 years ago

0.1.0

4 years ago