npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@amsterdam/react-maps

v1.1.1

Published

ReactJS wrapped around Leaflet

Downloads

2,074

Readme

React Maps

Please do not use this package anymore.

All dependencies can also be found at: npm install --save @amsterdam/arm-core

Loosely implemented package using react with leaflet. As compared to the existing react-leaflet, we want to set up things different in this repo:

  • React and leaflet are decoupled as much as possible. We don't want to introduce any side effects based on leaflet options, methods and events. This way it's way less painful updating the leaflet dependency.
  • Build components the 'react way', no extending js classes.
  • Barely any documentation. Users should just be referred to the existing leaflet documentation.
  • Pluggable: by using the useMapInstance, users can just attach their own plugin / leaflet extension to the map instance.

Usage

npm install --save @amsterdam/react-maps - exports useMapInstance, useMapEvents, useEvents, ToolTip, Popup, etc.

Developing

Install dependencies: npm install Start the example app: npm run start and check out http://localhost:8080

Checkout ./src/example/App.tsx for how to implement the components.

Link to existing project

First build the package: npm run build Then simply execute npm link in this repo, then in your repo where you want implement this package npm link @amsterdam/react-maps

Then we have just one issue: we now have two react dependencies: one in your project, and the one in this repo. This will unfortunately resolve in an error. There are two ways of fixing this:

  1. Add the following to your webpack config:
...
resolve: {
  modules: ['node_modules'],
  extensions: ['.js', '.jsx'],
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom'),
  },
},
  1. In case you don't have a webpack config, or using create-react-app Manually delete react and react-dom folder in this repo in the node_modules.