{"id":25319458,"url":"https://github.com/yann-github/hrnet-react-modal-101","last_synced_at":"2025-04-07T18:56:56.261Z","repository":{"id":188968729,"uuid":"679251126","full_name":"Yann-GitHub/hrnet-react-modal-101","owner":"Yann-GitHub","description":"This package offers an accessible and customizable modal component for React applications.","archived":false,"fork":false,"pushed_at":"2023-08-31T08:14:59.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T23:34:58.865Z","etag":null,"topics":["components","components-react","modal","npm-package","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/hrnet-react-modal-101/v/1.0.4","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yann-GitHub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-16T12:30:26.000Z","updated_at":"2023-08-23T06:54:38.000Z","dependencies_parsed_at":"2023-08-17T17:56:23.996Z","dependency_job_id":"b4587670-5d2f-479c-90f8-c6f4d989e8d4","html_url":"https://github.com/Yann-GitHub/hrnet-react-modal-101","commit_stats":null,"previous_names":["yann-github/hrnet-react-modal-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Fhrnet-react-modal-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Fhrnet-react-modal-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Fhrnet-react-modal-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Fhrnet-react-modal-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yann-GitHub","download_url":"https://codeload.github.com/Yann-GitHub/hrnet-react-modal-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713310,"owners_count":20983683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","components-react","modal","npm-package","typescript"],"created_at":"2025-02-13T20:40:31.268Z","updated_at":"2025-04-07T18:56:56.239Z","avatar_url":"https://github.com/Yann-GitHub.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HRnet React Modal\n\nThis repository contains a simple React component that can be used to render a modal.\n\n## Prerequisites\n\n- [NodeJS](https://nodejs.org/en/)\n- [Yarn](https://yarnpkg.com/) or [Npm]()\n- IDE (VSCode, IntelliJ, ..)\n\n## Getting Started\n\n### Install package\n\n```shell\nnpm install hrnet-react-modal-101\nor\nyarn add hrnet-react-modal-101\n```\n\n### Import the Modal component\n\n```js\nimport { Modal } from \"hrnet-react-modal-101\"\n```\n\nYou can then render the `Modal` component like any other React component in JSX.\n\n### Using the Modal component\n\n```jsx\nimport React, { useState } from 'react';\nimport { Modal } from 'hrnet-react-modal-101';\n\nfunction App() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const openModal = () =\u003e {\n    setIsOpen(true);\n  };\n\n  const closeModal = () =\u003e {\n    setIsOpen(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Modal\u003c/button\u003e\n      \u003cModal isOpen={isOpen} onClose={closeModal}\u003e\n        \u003ch2\u003eModal Content\u003c/h2\u003e\n        \u003cp\u003eThis is the content of the modal.\u003c/p\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Props\n\n|       Prop         |        Type       |                 Description               |\n| :----------------: | :---------------: | :---------------------------------------: |\n| `isOpen`           | `boolean`         | Determines if the modal is open or closed |\n| `onClose`          | `function`        | Function used to close the modal          |\n| `modalCustomStyle` | `Object`          | Custom styles for the modal               |\n| `children`         | `React.ReactNode` | Content to be displayed within the modal  |\n\n### Customizing Modal Styles\n\nThe `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:\n\n```jsx\nimport React, { useState } from 'react';\nimport { Modal } from 'hrnet-react-modal-101';\n\nfunction App() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const openModal = () =\u003e {\n    setIsOpen(true);\n  };\n\n  const closeModal = () =\u003e {\n    setIsOpen(false);\n  };\n\n  const customModalStyle = {\n    backgroundColor: 'lightblue',\n    border: '2px solid blue',\n    borderRadius: '10px',\n    padding: '20px'\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Modal\u003c/button\u003e\n      \u003cModal isOpen={isOpen} onClose={closeModal} modalCustomStyle={customModalStyle}\u003e\n        \u003ch2\u003eCustom Styled Modal\u003c/h2\u003e\n        \u003cp\u003eThis modal has a custom style applied.\u003c/p\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nIn 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.\n\n## Publishing on NPM\nThe 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).\n\n## License\n\nThis project is licensed under the ISC License.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyann-github%2Fhrnet-react-modal-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyann-github%2Fhrnet-react-modal-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyann-github%2Fhrnet-react-modal-101/lists"}