React Dashboard library for gisida. Includes a collection of standard componets used to build a Map Dashboard and provides functionality to also render custom components.
$ npm install gisida-react
NOTE: You can alternetively use yarn
to manage your node packages.
import React from 'react'
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { initStore } from 'gisida';
import { App, TitleBar, Map, Menu, StyleSelector, Legend } from 'gisida-react';
const store = initStore();
ReactDOM.render((
<Provider store={store}>
<App>
<Map />
<Menu />
<TitleBar />
<StyleSelector />
<Legend />
</ App>
</Provider>
), document.getElementById('root'));
- To render a custom react component just add it as a child under the
<App />
component.
Example:
class CustomComponent extends React.Component {
render() {
return (
<div>
<h1>A Simple React Component Example</h1>
</div>
);
}
}
<Provider store={store}>
<App>
<Map />
<CustomComponent />
</App>
</Provider>
- To have your compoent use the gisida state as props use redux connect. Gisida-react componets also provide a good example of how to achieve this.
- Clone repo:
$ git clone git@github.com:onaio/gisida-react.git
$ npm start
$ npm develop
- Build production distribution
$ npm build
- Publish to npm
$ npm publish
-
Check https://github.com/onaio/gisida-react/releases to see what the next release version number should be, i.e. if the last release is
0.0.7
the next should be0.0.8
depending on the Semantic Versioning guide, refer to (https://semver.org/). -
Create branch for new version being released,
git checkout -b <version-number>
$ git checkout -b 0.0.8
- Run
npm version <version-number>
. This creates a commit and updates version number in package.json.
$ npm version 0.0.8
- Push release branch to Github and tag
git push -u --follow-tags origin <version-number>
e.g
$ git push -u --follow-tags origin 0.0.8
- Merge release to master once it passes review