React-mkx-experiments NPM

React Useful Custom Components

npm npm NPM NPM Unpacked Size

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>