https://github.com/shilza/react-pretty-drawer

Simple and pretty React drawer
https://github.com/shilza/react-pretty-drawer

component-library javascript react web

Last synced: 22 days ago
JSON representation

Simple and pretty React drawer

• Host: GitHub
• URL: https://github.com/shilza/react-pretty-drawer
• Owner: Shilza
• License: mit
• Created: 2019-03-09T20:52:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T15:14:31.000Z (almost 2 years ago)
• Last Synced: 2024-10-17T06:19:14.252Z (about 1 month ago)
• Topics: component-library, javascript, react, web
• Language: JavaScript
• Homepage:
• Size: 1.73 MB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚛️ react-pretty-drawer

Simple and pretty React drawer component. View [demo](https://shilza.github.io/react-pretty-drawer/)

## 📦 Install

The easiest way to use react-pretty-drawer is to install it from npm and include it in your React build process

`$ npm install --save react-pretty-drawer`  

`$ yarn add react-pretty-drawer`

## Features

- [x] Open-close animation

- [x] Closable dialog

- [x] Available for customization

## Usage

```javascript

import React, {useState} from 'react';

import * as ReactDOM from "react-dom";

import {Drawer} from 'react-pretty-drawer';

const Example = () => {

    let [visible, setIsVisible] = useState(false);

    const closeDrawer = () => setIsVisible(false);

    const openDrawer = () => setIsVisible(true);

    return (

        <>

            

                
Drawer body

            

            Open

        >

    );

};


ReactDOM.render(, document.getElementById("root"));

```

## API

| Props  | Description  | Type | Default |

| :------------: |:-----------:| :-----:|:--------:|

| closable     | Whether show or not the close button on top right of the Drawer dialog| boolean | false |

| mask     | Whether to show mask or not        |   boolean | true |

| maskStyle | Style for Drawer`s mask  |  object | rgba(0, 0, 0, 0.3) |

| visible | Whether the Drawer dialog is visible or not |  boolean | false |

| height | Height of the Drawer dialog  |  string  number | 256px 100%|

| width | Width of the Drawer dialog |  string number | 256px 100% |

| placement | The placement of the Drawer  | 'top'  'right'  'bottom'  'left' | 'left' |

| onClose | Specify a callback that will be called when a user clicks mask or close button |  function | - |

| zIndex | The `z-index` of the Drawer.  |  number | 1000 |

| style | The `style` of the body wrapper.  |  object | - |

| className | The `class` of the body wrapper.  |  string | - |

## License

MIT