react-mkx-components

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

Input

• Custom input component with formik integration and optional visibility toggle for password fields.
• Easy to handle when you have using formik, handles errors etc.

import React from "react";
import { Input } from "react-mkx-components";
import { useFormik } from "formik";
const MyComponent = () => {
  const formik = useFormik({
    initialValues: {
      username: "",
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <div>
      <Input
        name="username"
        label="Username"
        placeholder="Enter Your Username"
        formik={formik}
      />
    </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