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

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;

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