diff --git a/src/component.js b/src/component.js
index 4bf1206..e25da7d 100644
--- a/src/component.js
+++ b/src/component.js
@@ -9,14 +9,15 @@ import _isPlainObject from 'lodash/isPlainObject';
import { parameterKeys } from 'utils/variables';
import {
- ConfigStoreContext, ClusteringStoreContext, DataStoreContext, LayoutStoreContext, UiStoreContext, VisualizationStoreContext, QueryStringStoreContext, WebworkerStoreContext
+ ConfigStoreContext, ClusteringStoreContext, DataStoreContext, LayoutStoreContext, QueryStringStoreContext, UiStoreContext, VisualizationStoreContext, WebworkerStoreContext,
+ ConfigProvider, ClusteringProvider, DataProvider, LayoutProvider, NormalizationProvider, QueryStringProvider, UiProvider, UiRoriProvider, VisualizationProvider, WebworkerProvider
} from 'store/stores';
// The '@component' is resolved from an alias in the webpack configuration.
// eslint-disable-next-line import/no-unresolved
import App from '@component';
-const VOSviewer = observer(({ width, targetRef, parameters = {}, data }) => {
+const VOSviewer = withResizeDetector(observer(({ width, targetRef, parameters = {}, data }) => {
const configStore = useContext(ConfigStoreContext);
const clusteringStore = useContext(ClusteringStoreContext);
const dataStore = useContext(DataStoreContext);
@@ -223,6 +224,28 @@ const VOSviewer = observer(({ width, targetRef, parameters = {}, data }) => {
);
-});
-
-export default withResizeDetector(VOSviewer);
+}));
+
+export default (props) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/store/stores.js b/src/store/stores.js
index cb71873..912996d 100644
--- a/src/store/stores.js
+++ b/src/store/stores.js
@@ -11,24 +11,73 @@ import UiRoriStore from 'store/ui-rori';
import VisualizationStore from 'store/visualization';
import WebworkerStore from 'store/webworker';
-const configStore = new ConfigStore();
-const clusteringStore = new ClusteringStore();
-const dataStore = new DataStore();
-const layoutStore = new LayoutStore();
-const normalizationStore = new NormalizationStore();
-const queryStringStore = new QueryStringStore();
-const uiStore = new UiStore();
-const uiRoriStore = new UiRoriStore();
-const visualizationStore = new VisualizationStore();
-const webworkerStore = new WebworkerStore();
-
-export const ConfigStoreContext = React.createContext(configStore);
-export const ClusteringStoreContext = React.createContext(clusteringStore);
-export const DataStoreContext = React.createContext(dataStore);
-export const LayoutStoreContext = React.createContext(layoutStore);
-export const NormalizationStoreContext = React.createContext(normalizationStore);
-export const QueryStringStoreContext = React.createContext(queryStringStore);
-export const UiStoreContext = React.createContext(uiStore);
-export const UiRoriStoreContext = React.createContext(uiRoriStore);
-export const VisualizationStoreContext = React.createContext(visualizationStore);
-export const WebworkerStoreContext = React.createContext(webworkerStore);
+export const ConfigStoreContext = React.createContext();
+export const ClusteringStoreContext = React.createContext();
+export const DataStoreContext = React.createContext();
+export const LayoutStoreContext = React.createContext();
+export const NormalizationStoreContext = React.createContext();
+export const QueryStringStoreContext = React.createContext();
+export const UiStoreContext = React.createContext();
+export const UiRoriStoreContext = React.createContext();
+export const VisualizationStoreContext = React.createContext();
+export const WebworkerStoreContext = React.createContext();
+
+export const ConfigProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const ClusteringProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const DataProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const LayoutProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const NormalizationProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const QueryStringProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const UiProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const UiRoriProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const VisualizationProvider = ({ children }) => (
+
+ {children}
+
+);
+
+export const WebworkerProvider = ({ children }) => (
+
+ {children}
+
+);