react-leaflet-sidetabs

react-leaflet-sidetabs (DEMO)

A 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";
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true,
      selected: 'home',
    };
  }
 
  onClose() {
    this.setState({collapsed: true});
  }
  onOpen(id) {
    this.setState({
      collapsed: false,
      selected: id,
    })
  }
 
  render () {
    return (
      <div>
        <Sidebar
          id="sidebar"
          position="right"
          collapsed={this.state.collapsed}
          closeIcon={<FiChevronRight />}
          selected={this.state.selected}
          onOpen={this.onOpen.bind(this)}
          onClose={this.onClose.bind(this)}
        >
           <Tab id="home" header="Home" icon={<FiHome />}>
            <p>No place like home!</p>
           </Tab>
           <Tab id="search" header="Search" icon={<FiSearch />}>
            <p>The noblest search is the search for excellence!</p>
           </Tab>
           <Tab id="settings" header="Settings" anchor="bottom" icon={<FiSettings />}>
            <p>We don't want privacy so much as privacy settings!</p>
           </Tab>           
        </Sidebar>
 
        <Map className="mapStyle" center={[0, 0]} zoom={7}>
          <TileLayer
            attribution=""
            url={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
          />
        </Map>
      </div>
    )
  }
}

License

MIT © eferhatg