injectComponentswill return a new
KeplerGlcomponent instance that renders the custom child component. This way we don’t have to keep track of hundreds of component as props and pass them all the way down. Dependency injection only happens once when
keplerGlcomponent is imported.
factoryis a function that takes a set of
dependenciesand return a component instance. In this example below, the
MapControlas dependencies and returns the
MapContainercomponent instance. Not all components are exported as factories in kepler.gl at the moment, we are still testing this feature.
[defaultFactory, customFactory]. To replace default component, user can import the existing component factory, call
injectComponentsand pass in the new recipe to get a new
injectComponentsfunction that user can call to inject a different recipe and returns a new kepler.gl instance.
injectComponentsto replace default
injectComponentsallows user to render custom component, however, they usually also want to pass additional props to the customized component which current component injector doesn’t support. To enable passing additional props, we implemented a
withStatehelper that passes additional props to the customized component.
withStatetakes 3 arguments:
actionCreators, They allows user to pass in kepler.gl instance state, state from other part of the app, and custom actions.
lense- A getter function to get a piece of kepler.gl subreducer state. Kepler.gl exports lenses for all its sub-reducers. For instance when pass
withState, the component will receive
mapStateof current kepler.gl instance as a prop.
mapStateToProps- A wild card to play. You can pass a
mapStateToPropsfunction to get the state from any part of the app. If the lenses aren’t enough, use
actions- action creators that will be passed to
withStatehelper to add reducer state and actions to customized component as additional props.