effrenus / Yandex Map React
Stars: ✭ 67
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
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 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
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].