react-naver-map-sdk

React library for Naver Maps API

Core Concepts

• Declarative and intuitive component-based API
• Automatic script loading - NaverMapProvider loads the Naver Maps API when needed
• Full TypeScript support with type safety

Installation

npm install react-naver-map-sdk
# or
yarn add react-naver-map-sdk
# or
pnpm add react-naver-map-sdk

Usage

The library provides a simple way to integrate Naver Maps into your React application. Wrap your app with NaverMapProvider and use the map components as needed.

import { NaverMapProvider, Map, Marker } from 'react-naver-map-sdk';

function App() {
  return (
    <NaverMapProvider client="YOUR_CLIENT_ID">
      <Map mapId="123">
        <Marker position={{ lat: 37.3595704, lng: 127.105399 }}/>
      </Map>
    </NaverMapProvider>
  );
}

All components must be used within the NaverMapProvider context. The provider handles the Naver Maps script loading and context initialization.

Documentation

For detailed usage and examples, please refer to our official documentation.

Examples

• Basic Map
• Using Markers
• Handling Events

Contributing

If you find a bug or have a feature request, please follow these steps:

1. Create a new issue
2. Create a new branch for your issue (git checkout -b feature/issue-number)
3. Make your changes
4. Commit your changes (git commit -m 'feat: brief description')
5. Push the branch (git push origin feature/issue-number)
6. Create a Pull Request

Local Development

Local development is broken into two parts (ideally using two tabs).

1. Library Development Server

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes:

npm start # runs rollup with watch flag

2. Example App Development Server

Second, run the example app in examples/ directory that's linked to the local version of your module:

# in another tab
cd examples
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's examples/src, it will live-reload your local dev server.

Manual Link Installation

If you get the error Module not found: Can't resolve 'react-naver-map-sdk' while trying to run the example app, you need to manually link your local development module:

1. In the root folder:

npm link

2. Go into examples/ and (after installing other dependencies):

npm link react-naver-map-sdk

License

MIT © Seohyeon Kim, Seonghun Kang