https://github.com/damevin/reactlightmodal

ReactLightModal is a modal library, built in typescript light and accessible.
https://github.com/damevin/reactlightmodal

accessibility library lightweight modal react typescript

Last synced: 2 months ago
JSON representation

ReactLightModal is a modal library, built in typescript light and accessible.

• Host: GitHub
• URL: https://github.com/damevin/reactlightmodal
• Owner: damevin
• Created: 2022-01-12T08:52:28.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-25T08:25:59.000Z (over 4 years ago)
• Last Synced: 2025-03-29T00:43:11.666Z (over 1 year ago)
• Topics: accessibility, library, lightweight, modal, react, typescript
• Language: TypeScript
• Homepage: https://reactlightmodal.xyz
• Size: 588 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![Logo](https://user-images.githubusercontent.com/72107589/149128610-e2e79c72-2df6-4315-b632-1a71c5ef84f4.png)

ReactLightModal is a modal library, built in typescript light and accessible. It's goal is to provide easy, flexible, configurable and accessible way to display modals for your application.

## Documentation

[See our Storybook Documentation](https://reactlightmodal.xyz)

## Authors

- [@raphaeldamevin](https://www.github.com/damevin)

## Demo

![demo gif](https://user-images.githubusercontent.com/72107589/149371773-01322567-8701-43f6-b0f5-940a84859318.gif)

## Installation

Install ReactLightModal with npm

```bash

npm i reactlightmodal-by-damevin

```

Install ReactLightModal with yarn

```bash

yarn add reactlightmodal-by-damevin

```

## Usage/Examples

```javascript

import Modal from 'reactlightmodal-by-damevin';

import React, {useState} from "react;

const [modal, setModal] = useState(false);

const toggleModal = () => {

    setModal(!modal)

}

function App() {

  return (

      

  )

}

```

## Props

| Name            | Type          | Required | Description                                                              | Default value     |

| --------------- | ------------- | -------- | ------------------------------------------------------------------------ | ----------------- |

| canClose        | `boolean`     | `false`  | Display cross button on the top-right of the modal box                   | `true`            |

| closeBtnContent | `JSX.element` | `false`  | Custom content add on the close button (exemple: personalized icon, ...) | `{X