Launch Week Day 2: Introducing Reports: An Extensible Reporting Framework for Socket Data.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-mkx-components

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-mkx-components - npm Package Compare versions

Comparing version
1.0.7
 to
1.0.8
+1
-1
package.json
{
"name": "react-mkx-components",
"version": "1.0.7",
"version": "1.0.8",
"description": "",

@@ -5,0 +5,0 @@ "main": "./dist/index.js",

+50
-4
README.md

@@ -1,4 +0,5 @@

## Custom Input Component
## React Useful Custom Components
A simple custom input component for React applications.
![NPM](https://img.shields.io/badge/Author-Mani%20Kant%20Sharma-blue) ![npm](https://img.shields.io/npm/v/react-mkx-components?color=1C939D)
![npm](https://img.shields.io/npm/dt/react-mkx-components) ![NPM](https://img.shields.io/npm/l/react-mkx-components) ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-mkx-components)

@@ -21,2 +22,4 @@ ## Installation

`Input` Component
```jsx

@@ -43,6 +46,49 @@ import React, { useState } from "react";

`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.
```jsx
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
| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
## License
This project is licensed under the ISC License - see the LICENSE file for details.
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
Author : Mani Kant Sharma
## Author
[Mani Kant Sharma](https://www.linkedin.com/in/manikants98)
[![Email](https://img.shields.io/badge/-Gmail-ea4335?style=for-the-badge&logo=gmail&logoColor=white)](mailto:manikants157@gmail.com)
[![Instagram](https://img.shields.io/badge/-Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/manikantsharmaa/)
[![GitHub](https://img.shields.io/badge/-GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/manikants98)