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;

Select

• Custom select component with formik integration.
• Easy to handle when you have using formik, handles errors etc.

Example

import { Button, MenuItem } from '@mui/material'
import { useFormik } from 'formik'
import React from 'react'
import Select from 'react-mkx-components'
import  as Yup from 'yup'

const MyComponent: React.FC = () => {
 const formik = useFormik({
   initialValues: {
     value: '',
   },
   validationSchema: Yup.object({
     value: Yup.string().required(),
   }),
   onSubmit: (values) => {
     console.log(values)
   },
 })

 return (
   <form onSubmit={formik.handleSubmit}>
     <Select
       name="value"
       className="w-72"
       label="Test"
       formik={formik}
     >
       <MenuItem value="Item 1">Item 1</MenuItem>
       <MenuItem value="Item 2">Item 2</MenuItem>
       <MenuItem value="Item 3">Item 3</MenuItem>
       <MenuItem value="Item 4">Item 4</MenuItem>
       <MenuItem value="Item 5">Item 5</MenuItem>
     </Select>
     <Button type="submit">Submit</Button>
   </form>
 )
}

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