Extra React

Extra React is a component library for React.js that aims to make developers' lives easier by providing two components: List and Conditional.

Install

npm install extra-react

Components

List

The List component is designed to render a list of items based on the provided data array. The List component takes care of assigning unique keys to each item in the provided data array, so you don't have to worry about it every time you use the List component.

Props

| Name | Description | Is Required | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | data | An array of data. | true | | renderItem | A React component that defines how each item in the list should be rendered. | true | | uniqueKeyProp | A string representing the unique key property in the data array. If the data objects have a unique property like an "id", it is recommended to provide this prop. | false |

Examples

// Example without using uniqueKeyProp

import { List } from "extra-react";

const data = ["Title 1", "Title 2", "Title 3"];

const Item = ({ data }) => {
  return <p>{data}</p>;
};

const App = () => {
  return <List data={data} renderItem={Item} />;
};

export default App;

// Example using uniqueKeyProp

import { List } from "extra-react";

const data = [
  { id: 1, title: "Title 1" },
  { id: 2, title: "Title 2" },
  { id: 3, title: "Title 3" },
];

const Item = ({ data }) => {
  return <p>{data.title}</p>;
};

const App = () => {
  return <List data={data} renderItem={Item} uniqueKeyProp="id" />;
};

export default App;

Conditional

The Conditional component allows you to conditionally render content based on a given condition.

Props

| Name | Description | Is Required | | --------- | ------------------------------------------------------------------------------------- | ----------- | | children | The React children element to be rendered. | true | | condition | A boolean value determining whether to render the children or the fallback component. | true | | fallback | A React component to be rendered if the condition is false. | false |

Examples

// Simple Example

import { Conditional } from "extra-react";

const App = () => {
  return (
    <Conditional condition={false}>
      <p>If the condition is true, render me. Otherwise, render nothing.</p>
    </Conditional>
  );
};

export default App;

// Advanced Example

import { Conditional } from "extra-react";

const Fallback = () => {
  return (
    <Conditional
      condition={false}
      fallback={() => (
        <p>
          The condition is false in both the App component and the Fallback
          component.
        </p>
      )}
    >
      <p>
        The condition is false in the App component but true in the Fallback
        component.
      </p>
    </Conditional>
  );
};

const App = () => {
  return (
    <Conditional condition={false} fallback={Fallback}>
      <p>The condition is true in the App component.</p>
    </Conditional>
  );
};

export default App;

Contributing

Contributions to Extra React are welcome! If you find any issues or want to suggest improvements, please open an issue or submit a pull request on the repository.

License

MIT

Authors

Petros Petrosyan