(DEMO)
react-leaflet-sidetabsA react-leaflet plugin of sidebar-v2
inspired by @condense/react-leaflet-sidebarv2
Install
npm install --save react-leaflet-sidetabs
Usage
Sidebar should be sibling of react-leaflet Map component.
react-icons is used at the example below. Any other icon library can also be used by giving icon names as string to icon and closeIcon props.
onClose and onOpen callbacks should be given as props to change state collapsed and selected especially.
Sidebar is alignable to left and right with position prop. Also Tabs are alignable to bottom and top with anchor prop.
import React Component from 'react'import Map TileLayer from 'react-leaflet';import 'leaflet/dist/leaflet.css';import Sidebar Tab from 'react-leaflet-sidetabs'import FiHome FiChevronRight FiSearch FiSettings from "react-icons/fi"; { ; thisstate = collapsed: true selected: 'home' ; } { this; } { this } { return <div> <Sidebar ="sidebar" ="right" = = = = = > <Tab ="home" ="Home" => <p>No place like home!</p> </Tab> <Tab ="search" ="Search" => <p>The noblest search is the search for excellence!</p> </Tab> <Tab ="settings" ="Settings" ="bottom" => <p>We want privacy so much as privacy settings!</p> </Tab> </Sidebar> <Map ="mapStyle" = => <TileLayer ="" = /> </Map> </div> }
License
MIT © eferhatg