react-mkx-experiments

React Useful Custom Components

Installation

You can install the package using npm:

npm install react-mkx-components

Or using yarn:

yarn add react-mkx-components

Usage

Input Component

import React, { useState } from "react";
import { Input } from "react-mkx-components";

const MyComponent = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <Input
        value={inputValue}
        setValue={setValue}
        placeholder="Enter your text"
      />
    </div>
  );
};

export default MyComponent;

Choice Component

The Choice component provides conditional rendering functionality with the following sub-components:

• When: Renders children when a condition is true.
• Then: Renders children when a condition is false.
• And: Renders children if both conditions are true.

import { Choice } from "react-mkx-components";

const ExampleComponent = () => {
  const condition = true;

  return (
    <div>
      <Choice.When condition={condition}>
        <p>This will be rendered if the condition is true.</p>
      </Choice.When>
      <Choice.Then condition={condition}>
        <p>This will be rendered if the condition is false.</p>
      </Choice.Then>
      <Choice.And condition={condition}>
        <p>This will be rendered if both conditions are true.</p>
      </Choice.And>
    </div>
  );
};

export default ExampleComponent;

ScrollDiv

• Scrollable div component that triggers pagination when scrolled to the bottom.

Exmaple

<ScrollDiv
  page={currentPage}
  setPage={setPage}
  totalPage={totalPages}
  style={{ backgroundColor: "lightgray", padding: "10px" }}
  height={400}
>
  {content}
</ScrollDiv>

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Mani Kant Sharma