README
React Leaflet Popup
Замена обычному L.Popup с поддержкой рендеринга через Реакт.
Работает в трёх режимах:
- Обычный L.Popup без изменения поведения;
- Использование уже подготовленного Реакт-элемента;
- Использование Реакт-компонента с заданием свойств;
Как использовать?
Режим обычного Popup - использовать как обычно - Popup.setContent устанавливает HTML или DOM-элемент.
С подготовленным Реакт-элементом При создании задать в options.reactElement корректный Реакт-элемент. При необходимости обновления вызвать setContent с новым Реакт-элементом.
С Реакт-компонентом (думаю, это самый рабочий вариант) При создании задать в options.reactComponent корректный Реакт-компонент, а в options.reactComponentProps - свойства, которые будут переданы в компонент. Также в свойства будет добавлено свойство "leafletLayer" - source-объект Попапа. Пример:
var ReactPopup = require('./react-popup'); var MyPopupComponent = require('./components/my-popup') // .jsx map.on('click', function (e) { map.openPopup(ReactPopup({ reactComponent: MyPopupComponent, reactComponentProps: { data: someFeature.properties } }).setLatLng(e.latlng)); });
В режимах 2 и 3 реакт рендерится в элемент wrapper (см. DOM-структуру Попапа), который оборачивает содержимое. То есть основная структура и кнопка "закрыть" в этой версии находятся вне компонента. При закрытии Попапа, перед уничтожением, теоретически должна быть корректно вызвана функция жизненного цикла Реакт-компонента "componentWillUnmount". После инициализации компонента предполагается, что режим его работы менятся не будет.
How to run the example
git clone https://github.com/burmisov/react-redux-leaflet
cd react-redux-leaflet
npm install
npm run example