All Projects → effrenus → Yandex Map React

effrenus / Yandex Map React

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Yandex Map React

React Yandex Maps
Yandex Maps API bindings for React
Stars: ✭ 277 (+313.43%)
Mutual labels:  yandex, react-component
React Bps
🔱 Create breakpoints to your component props
Stars: ✭ 64 (-4.48%)
Mutual labels:  react-component
Yadisk
Библиотека-клиент REST API Яндекс.Диска для Python / Yandex.Disk REST API client library for Python
Stars: ✭ 42 (-37.31%)
Mutual labels:  yandex
React Stonecutter
Animated grid layout component for React
Stars: ✭ 1,089 (+1525.37%)
Mutual labels:  react-component
React Sane Contenteditable
React component with sane defaults to make any element contentEditable
Stars: ✭ 45 (-32.84%)
Mutual labels:  react-component
React Router Form
<Form> is to <form> as <Link> is to <a>
Stars: ✭ 58 (-13.43%)
Mutual labels:  react-component
Reimgix
🌇 Get all the benefits of Imgix using React. Supports LQIP.
Stars: ✭ 39 (-41.79%)
Mutual labels:  react-component
React Lottie
Render After Effects animations on React based on lottie-web
Stars: ✭ 1,132 (+1589.55%)
Mutual labels:  react-component
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (-7.46%)
Mutual labels:  react-component
React Contenteditable
React component for a div with editable contents
Stars: ✭ 1,057 (+1477.61%)
Mutual labels:  react-component
React Tweenful
Animation engine designed for React
Stars: ✭ 48 (-28.36%)
Mutual labels:  react-component
Nemiro.oauth.dll
Nemiro.OAuth is a class library for authorization via OAuth protocol in .NET Framework
Stars: ✭ 45 (-32.84%)
Mutual labels:  yandex
React No Content
A SVG react component to display when there's no content.
Stars: ✭ 59 (-11.94%)
Mutual labels:  react-component
React For Electron Only
React component for rendering component for Electron based clients only
Stars: ✭ 45 (-32.84%)
Mutual labels:  react-component
React Console
Simple react console emulator
Stars: ✭ 64 (-4.48%)
Mutual labels:  react-component
React Nouislider
React wrapper on NoUiSlider
Stars: ✭ 41 (-38.81%)
Mutual labels:  react-component
React Echarts V3
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 48 (-28.36%)
Mutual labels:  react-component
React Topbar Progress Indicator
`topbar` progress indicator as a React component
Stars: ✭ 58 (-13.43%)
Mutual labels:  react-component
React Router Ga
Google Analytics component for React Router
Stars: ✭ 66 (-1.49%)
Mutual labels:  react-component
React Hover
React hover --- make hover easy http://cht8687.github.io/react-hover/example/
Stars: ✭ 64 (-4.48%)
Mutual labels:  react-component

yandex-map-react

Quick start

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, MarkerLayout } from 'yandex-map-react';

export default function ContactMap (props) {
    render () {
        return (
            <Map onAPIAvailable={function () { console.log('API loaded'); }} center={[55.754734, 37.583314]} zoom={10}>
                <Marker lat={this.props.lat} lon={this.props.lon} />
            </Map>
        );
    }
}

Installation

yandex-map-react requires React >= 0.14

npm

npm install --save yandex-map-react

Parameters

Parameter Default value Type Decription
width 600 Number container width
height 600 Number container height
style {} Object styles that will be applied to container element
loadOptions {lang: 'ru_RU', coordorder: 'latlong', load: 'package.full', mode: 'release'} Object API loading params. Enabled params: lang, apikey, coordorder, load, mode
Supported YandexMap API params
center [55, 45] Array[Number] coordinates of map center
zoom 10 Number zoom level
state {controls: []} Object describe map state (ex. controls)
Callbacks
onAPIAvailable - Function callback will be invoked as soon as YandexMAP API available

Events

Components support API events, to handle convert first letter of event name to uppercase and add on to begin. Example: mousemove -> onMousemove (description).

Features

Custom Geoobject marker layout. Custom balloon layout - soon.

<Marker lat={55.783379} lon={37.775575}>
    <MarkerLayout>
        <div style={{borderRadius: '50%', overflow: 'hidden'}}>
            <img src="http://loremflickr.com/80/80"/>
        </div>
    </MarkerLayout>
</Marker>

Examples

https://github.com/effrenus/yandex-map-react-examples/

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].