simple-rc-slidepanel
Accessible and simple slide panel component for React.JS
Table of Contents
Instalition
$ npm install simple-rc-slidepanel
Demo
You can find demo here.
Usage
<Slidepanel setWrapperRef = thissetWrapperRef closePanel = thisclosePanel isPanelOpen = isPanelOpen left width = "35%" height = "100%" bgColor = "#FFFAF0" > <h3>Children element</h3></Slidepanel>
Props
Name | Type | Description |
---|---|---|
left | - | panel position |
right | - | panel position |
top | - | panel position |
bottom | - | panel position |
width | string | panel width |
height | string | panel height |
bgColor | string | panel background color |
Code example
;; { superprops; thisstate = isPanelOpen: false ; thisopenPanel = thisopenPanel; thisclosePanel = thisclosePanel; thissetWrapperRef = thissetWrapperRef; thishandleClickOutside = thishandleClickOutside; } { document; } { document; } { thiswrapperRef = node; } { if thiswrapperRef && !thiswrapperRef this; } { this; } { this; } { const isPanelOpen = thisstate; return <div className="app"> <div> <button onClick = thisopenPanel >Open left Slidepanel</button> </div> <Slidepanel setWrapperRef = thissetWrapperRef closePanel = thisclosePanel isPanelOpen = isPanelOpen left width = "35%" height = "100%" bgColor = "#FFFAF0" > <h3>Children element</h3> </Slidepanel> </div> ; }