Miss any of our Open RFC calls?Watch the recordings here! »

react-leaflet-sidetabs

1.0.1 • Public • Published

react-leaflet-sidetabs (DEMO)

A react-leaflet plugin of sidebar-v2

NPM JavaScript Style Guide

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

Keywords

none

Install

npm i react-leaflet-sidetabs

DownloadsWeekly Downloads

731

Version

1.0.1

License

MIT

Unpacked Size

53.3 kB

Total Files

7

Last publish

Collaborators

  • avatar