https://github.com/benshope/map-panel

Draggable & Responsive React Panel Component
https://github.com/benshope/map-panel

component drag-panel panel react responsive responsive-layout

Last synced: about 1 month ago
JSON representation

Draggable & Responsive React Panel Component

• Host: GitHub
• URL: https://github.com/benshope/map-panel
• Owner: benshope
• Created: 2020-04-07T18:15:26.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:55:56.000Z (almost 2 years ago)
• Last Synced: 2023-05-31T23:35:55.616Z (over 1 year ago)
• Topics: component, drag-panel, panel, react, responsive, responsive-layout
• Language: TypeScript
• Homepage: https://benshope.github.io/map-panel
• Size: 3.85 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Map Panel

[![gzip size](https://img.shields.io/bundlephobia/minzip/map-panel?label=gzip%20size&style=for-the-badge)](https://bundlephobia.com/result?p=map-panel)

[![npm version](https://img.shields.io/npm/v/map-panel.svg?style=for-the-badge)](https://www.npmjs.com/package/map-panel)

[![npm downloads](https://img.shields.io/npm/dm/map-panel.svg?style=for-the-badge)](https://www.npmjs.com/package/map-panel)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://en.wikipedia.org/wiki/MIT_License)

This is a React/Typescript component for adding a responsive, mobile-ready panel over a map. The implementation is just one file, it can be styled, and it has only peer dependencies.

## Install

- **Npm:** `npm install map-panel`

- **Yarn:** `yarn add map-panel`

## Basic Example

```jsx

import React from "react";

import MapPanel from "map-panel";

const MyComponent = () => (

  


    

      
{`Panel Content`}

    

    

  

);

```


## Scrolling & Controls Example

```jsx

import React from "react";

import MapPanel, { InnerScrollDiv } from "map-panel";

const MyComponent = () => {

  const breakpoint = 1024;

  const [panelY, setPanelY] = React.useState(0);

  const [isOpen, setIsOpen] = React.useState(null);

  return (

    


       {

          setPanelY(newPanelY);

          newPanelY === 1 && setIsOpen(true);

          newPanelY === 0 && setIsOpen(false);

        }}

        isOpen={isOpen}

      >

        

          


             setIsOpen(!isOpen)}>

              {isOpen ? "Close" : "Open"} Panel

            

          

        

      

      

    

  );

};

```


See the [examples](https://benshope.github.io/map-panel) and the [examples source code](https://github.com/benshope/map-panel/blob/master/stories.tsx) for more snippets to copy.

## Help

If there are any examples you'd like to see or use cases I didn't cover, please [file an issue](https://github.com/benshope/map-panel/issues/new).