Develop Reference

Get SVG icons dynamically in Next.js

I wanted to get SVG icons dynamically. I found a method to do this but it seems I made some mistakes. Where am I doing it wrong?
Icon.js
import React from "react";
import { ReactComponent as Bollards } from "./icons/bollards.svg";
import { ReactComponent as Earthquake } from "./icons/earthquake.svg";
import { ReactComponent as Fire } from "./icons/fire.svg";
import { ReactComponent as Healthy } from "./icons/heartbeat.svg";
import { ReactComponent as Home } from "./icons/home.svg";
import { ReactComponent as Planting } from "./icons/planting.svg";
import { ReactComponent as Business } from "./icons/suitcase.svg";
import { ReactComponent as Travel } from "./icons/airplane-around-earth.svg";
const iconTypes = {
bollards: Bollards,
earthQuake: Earthquake,
fire: Fire,
healthy: Healthy,
home: Home,
planting: Planting,
business: Business,
travel: Travel
};
const IconComponent = ({ name, ...props }) => {
let Icon = iconTypes[name];
return <Icon {...props} />;
};
export default IconComponent;
Feautures.js
import React from "react";
import Icon from "./icon";
export default function Features() {
return (
<div>
<Icon name="bollards" />
</div>
);
}
I get this error when trying to export icons.
error - ./components/icon.js
Attempted import error: 'ReactComponent' is not exported from './icons/bollards.svg' (imported as 'Bollards').

You can use SVGR that allows us to import SVGs into your React applications as components.
You need to add #svgr/webpack as a dependency and modify the next.config.js file like this.
next.config.js:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
}
};
Then, you can simply import your icons without using ReactComponent.
Icon.js:
import React from "react";
import Bollards from './icons/bollards.svg';
import Earthquake from './icons/earthquake.svg';
import Fire from './icons/fire.svg';
import Healthy from './icons/heartbeat.svg';
import Home from './icons/home.svg';
import Planting from './icons/planting.svg';
import Business from './icons/suitcase.svg';
import Travel from './icons/airplane-around-earth.svg';
const iconTypes = {
bollards: Bollards,
earthQuake: Earthquake,
fire: Fire,
healthy: Healthy,
home: Home,
planting: Planting,
business: Business,
travel: Travel
};
const IconComponent = ({ name, ...props }) => {
let Icon = iconTypes[name];
return <Icon {...props} />;
};
export default IconComponent;
Working demo is available on CodeSandbox.

How to access react-redux store outside react component in redux-toolkit?

I am trying to access redux-store in my helper function.
My store looks like code below:
import { combineReducers, configureStore } from '#reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import counterReducer from 'app/Components/Counter/counterSlice';
import languageReducer from 'redux/features/app_language/language.slice';
import loginReducer, {
currentUserReducer,
currentUserIdReducer,
} from 'redux/features/app_login/loginSlice';
import rootSaga from 'redux/sagas';
import emailEditorReducer from 'redux/features/email_editor';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const configureCustomStore = () => {
const sagaMiddleware = createSagaMiddleware();
const persistConfig = {
key: 'root',
storage,
};
const rootReducer = combineReducers({
counter: counterReducer,
app_language: languageReducer,
isAuthenticated: loginReducer,
currentUser: currentUserReducer,
currentUserId: currentUserIdReducer,
emailEditor: emailEditorReducer,
});
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}).concat(sagaMiddleware),
});
const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
return { store, persistor };
};
export default configureCustomStore();
export const { store, persistor } = configureCustomStore();
console.log(store.getState(), 'State');
As you can see in the last two lines of code i am trying to console.log the state and i am getting the state as expected. But when i am importing the store in my helper function i am getting undefined. Here is how i am doing it
import storeSaga from 'redux/store/store';
const { store } = storeSaga;
Error i am getting is:
TypeError: Cannot destructure property 'store' of 'redux_store_store__WEBPACK_IMPORTED_MODULE_1__.default' as it is undefined.
I was searching for the solution i end up to this who got almost same issue, the answer is also mentioned in the next comment but honestly i didn't understand it.
I may have done something wrong in order of imports i tried all the ways i could.
For the reference you can have a look on my index.js file below:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next';
import * as serviceWorker from './serviceWorker';
import i18n from './_helpers/utils/i18n';
import storeSaga from 'redux/store/store';
const { store, persistor } = storeSaga;
import App from './app/Pages/App/App';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate persistor={persistor}>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);
serviceWorker.unregister();
I appreciate your help so much. Thanks in advance.

In
export default configureCustomStore();
export const { store, persistor } = configureCustomStore();
you are creating two independent stores.
Also, when importing you import the first of them and call it storeSaga even though this has nothing to do with a saga at all.
Kick the default export out and do import { store } from 'redux/store/store'; everywhere.
That makes it much clearer what you are doing.
If you still have errors after that, you have a circular import somewhere that you need to resolve, meaning that this file imports from a file that also imports this file (maybe with a third file in-between), forming a circle. JavaScript cannot work with that.

You can Inject Store to any file outside react component like this example:
File axios:
let store
export const injectStore = _store => {
store = _store
}
axiosInstance.interceptors.request.use(config => {
config.headers.authorization = store.getState().auth.token
return config
})
File index (root of your project)
import store from './app/store'
import {injectStore} from './common/axios'
injectStore(store)
You can also read about this here:
https://redux.js.org/faq/code-structure#how-can-i-use-the-redux-store-in-non-component-files

Are there any working react examples of kepler.gl?

Right now there is an open, breaking bug in the provided kepler.gl React examples.
The open issue:
https://github.com/keplergl/kepler.gl/issues/983
The React examples that currently don't seem to work:
https://github.com/keplergl/kepler.gl/tree/master/examples
I'm trying to get a kepler.gl map working in my React app. I can see the sidebar and other extraneous things show up but the actual map itself does not. If anybody has any working examples of integrating a kepler map into a React app I would love to see it but also if anybody knows why my current integration is broken that would also be of great help.
In my index.js file I have:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers, compose} from 'redux';
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as serviceWorker from './serviceWorker';
import axios from 'axios';
import App from './components/App';
import config from './config';
// reducers
import auth from './reducers/auth';
import runtime from './reducers/runtime';
import navigation from './reducers/navigation';
import posts from './reducers/posts';
// import reducers from './reducers';
import keplerGlReducer from 'kepler.gl/reducers';
import {enhanceReduxMiddleware} from 'kepler.gl/middleware';
axios.defaults.baseURL = config.baseURLApi;
axios.defaults.headers.common['Content-Type'] = "application/json";
const token = localStorage.getItem('token');
if (token) {
axios.defaults.headers.common['Authorization'] = "Bearer " + token;
}
const reducers = combineReducers({
auth,
runtime,
navigation,
posts,
// <-- mount kepler.gl reducer in your app
keplerGl: keplerGlReducer,
});
const store = createStore(
reducers,
applyMiddleware(
ReduxThunk
)
);
ReactDOM.render(
<Provider store={store}>
<link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"></link>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet"></link>
<script src="https://unpkg.com/kepler.gl/umd/keplergl.min.js"></script>
<App />
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
And in my map component I have:
import React from 'react';
import {connect} from 'react-redux';
import KeplerGl from 'kepler.gl';
import {addDataToMap} from 'kepler.gl/actions';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
const sampleTripData = {
fields: [
{name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},
{name: 'pickup_longitude', format: '', type: 'real'},
{name: 'pickup_latitude', format: '', type: 'real'}
],
rows: [
['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],
['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],
['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]
]
};
const sampleConfig = {
visState: {
filters: [
{
id: 'me',
dataId: 'test_trip_data',
name: 'tpep_pickup_datetime',
type: 'timeRange',
enlarged: true
}
]
}
};
class Maps extends React.Component {
componentDidMount() {
this.props.dispatch(
addDataToMap({
datasets: {
info: {
label: 'Sample Taxi Trips in New York City',
id: 'test_trip_data'
},
data: sampleTripData
},
option: {
centerMap: true,
readOnly: false
},
config: sampleConfig
})
);
}
render() {
return (
<div style={{position: 'absolute', left: 0, width: '100vw', height: '100vh'}}>
soimething
<AutoSizer>
{({height, width}) => (
<KeplerGl
id="map"
width={width}
mapboxApiAccessToken={"my mapbox token"}
height={height}
/>
)}
</AutoSizer>
</div>
);
}
}
const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({dispatch});
export default connect(mapStateToProps, dispatchToProps)(Maps);

I don't see anything glaringly out of order in your example but if the UI is showing up and the map is not, it could be the Mapbpox-related imports and tokens etc. Would be good to inspect your console for errors or warnings and also check the network tab.
I imported a working example I have with Create React App plus Typescript and KeplerGL into Codesandbox for your reference if you still need it: https://codesandbox.io/s/create-react-app-typescript-keplergl-bv0vb

Save a .env file in root and give ur React_API=
it will work

Reducers are gone after attempting to implement redux-persist

I am attempting to implement redux-persist to persist a specific reducer only, invoices, version, but in my case, my reducers are all gone.
This is the entry point:
import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistCombineReducers } from "redux-persist";
import { createWhitelistFilter } from "redux-persist-transform-filter";
import { PersistGate } from 'redux-persist/es/integration/react';
import storage from "redux-persist/lib/storage";
import thunkMiddleware from "redux-thunk";
import { apiMiddleware } from "redux-api-middleware";
import reducers from "./actions/reducers";
import AppContainer from "./containers/App";
import FlashMessage from "./containers/common/FlashMessage";
import "./App.css"
const middleware = [thunkMiddleware, apiMiddleware];
const persistConfig = {
storage,
key: 'root',
transforms: [
createWhitelistFilter('invoices')
]
};
const store = createStore(
persistCombineReducers(persistConfig, reducers),
compose(
applyMiddleware(...middleware),
)
);
const persistor = persistStore(store);
export default class App extends Component {
render () {
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
{/*<FlashMessage/>*/} // Since there is no reducer, this fails
<AppContainer/>
</PersistGate>
</Provider>
)
}
}
And this is the reducers file I have:
import { combineReducers } from "redux";
import { routerReducer as router } from "react-router-redux";
import app from "./app";
import invoices from "./invoices/invoices";
import recipients from "./recipients/recipients";
export const makeRootReducer = (asyncReducers) => {
return combineReducers({
router,
app,
invoices,
recipients,
...asyncReducers
})
};
export const injectReducer = (store, { key, reducer }) => {
store.asyncReducers[key] = reducer;
store.replaceReducer(makeRootReducer(store.asyncReducers))
};
export default makeRootReducer;
I have followed many suggestions but I must be missing something.

I found out why. After checking the source code, I saw the following documentation block of persistCombineReducers:
/**
* It provides a way of combining the reducers, replacing redux's #see combineReducers
* #param config persistence configuration
* #param reducers set of keyed functions mapping to the application state
* #returns reducer
*/
export function persistCombineReducers<S>(config: PersistConfig, reducers: ReducersMapObject): Reducer<S & PersistedState>;
The key words were "replacing redux's #see combineReducers".
Removing combineReducers from my reducers file to the following solved the issue:
import { routerReducer as router } from "react-router-redux";
import app from "./app";
import invoices from "./invoices/invoices";
import recipients from "./recipients/recipients";
const reducers = {
router,
app,
invoices,
recipients,
};
export default reducers;

Using Material-ui with Electron

I am building out an electron app with React and trying to use Material-UI for the UI elements. I added a datepicker and timepicker to a component and the input shows up in the electron app, however when you click on it, nothing happens. Not sure what I'm missing in order to get this to work correctly
Component :
import React, { Component } from 'react';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
export default class Schedule extends Component {
render() {
return (
<div>
Pick a date :
<DatePicker id="date"/>
and time :
<TimePicker id="time"/>
</div>
)
}
}
index.js :
import 'babel-polyfill'; // generators
import React from 'react';
import { render as renderReact } from 'react-dom';
import debounce from 'debounce';
import configureStore from './store/configureStore';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const state = JSON.parse(localStorage.getItem('state'));
const store = configureStore(state || {});
let App = require('./components/app').default;
const render = (Component) => {
renderReact(<MuiThemeProvider><Component {...store} /></MuiThemeProvider>, document.getElementById('root'));
};
if (module.hot) {
module.hot.accept('./components/app', function() {
let newApp = require('./components/app').default;
render(newApp);
});
}
const saveState = debounce(() => {
localStorage.setItem('state', JSON.stringify(store.getState()));
}, 1000);
store.subscribe(() => {
saveState();
render(App);
if (process.env.ENV === 'development') {
console.log('state', store.getState());
}
});
store.dispatch({ type: 'APP_INIT', store });

In your app.js, you need to import and execute the following plugin:
const injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();