https://github.com/yann-github/hrnet-react-modal-101
This package offers an accessible and customizable modal component for React applications.
https://github.com/yann-github/hrnet-react-modal-101
components components-react modal npm-package typescript
Last synced: 3 months ago
JSON representation
This package offers an accessible and customizable modal component for React applications.
- Host: GitHub
- URL: https://github.com/yann-github/hrnet-react-modal-101
- Owner: Yann-GitHub
- Created: 2023-08-16T12:30:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-31T08:14:59.000Z (almost 2 years ago)
- Last Synced: 2025-03-15T23:34:58.865Z (4 months ago)
- Topics: components, components-react, modal, npm-package, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/hrnet-react-modal-101/v/1.0.4
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HRnet React Modal
This repository contains a simple React component that can be used to render a modal.
## Prerequisites
- [NodeJS](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/) or [Npm]()
- IDE (VSCode, IntelliJ, ..)
## Getting Started
### Install package
```shell
npm install hrnet-react-modal-101
or
yarn add hrnet-react-modal-101
```
### Import the Modal component
```js
import { Modal } from "hrnet-react-modal-101"
```
You can then render the `Modal` component like any other React component in JSX.
### Using the Modal component
```jsx
import React, { useState } from 'react';
import { Modal } from 'hrnet-react-modal-101';
function App() {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => {
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
return (
Open Modal
Modal Content
This is the content of the modal.
);
}
export default App;
```
### Props
| Prop | Type | Description |
| :----------------: | :---------------: | :---------------------------------------: |
| `isOpen` | `boolean` | Determines if the modal is open or closed |
| `onClose` | `function` | Function used to close the modal |
| `modalCustomStyle` | `Object` | Custom styles for the modal |
| `children` | `React.ReactNode` | Content to be displayed within the modal |
### Customizing Modal Styles
The `modalCustomStyle` prop allows you to apply custom styles to the modal. You can pass an object with CSS properties to this prop to achieve the desired look and feel. Here's an example:
```jsx
import React, { useState } from 'react';
import { Modal } from 'hrnet-react-modal-101';
function App() {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => {
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
const customModalStyle = {
backgroundColor: 'lightblue',
border: '2px solid blue',
borderRadius: '10px',
padding: '20px'
};
return (
Open Modal
Custom Styled Modal
This modal has a custom style applied.
);
}
export default App;
```
In this example, we're passing a customModalStyle object to the `modalCustomStyle` prop. This prop allows you to provide custom styles for the modal according to your needs.
## Publishing on NPM
The HRnet React Modal is available as an npm package. You can find it [here](https://www.npmjs.com/package/hrnet-react-modal-101/v/1.0.4).
## License
This project is licensed under the ISC License.