How to change values in config file dynamically in react?

Question

I have a template that has config.js file which loads theme configs I want to add toggle switch from Light mode to Dark mode. Theme changes when you make changes in config.js but I don't know how to change values in config.js dynamically.

I'm Planning to have a toggle in the index file.

config.js

export default {
    defaultPath: '/dashboard/default',
    basename: '',
    layout: 'vertical',
    preLayout: '', 
    collapseMenu: false,
    layoutType: 'dark', // menu-light
    navIconColor: true,
    headerBackColor: 'header-default', // header-dark
    navBackColor: 'navbar-dark', // navbar-dark
    navBrandColor: 'brand-dark', // brand-dark
    navBackImage: false, 
    rtlLayout: false,
    navFixedLayout: true,
    headerFixedLayout: false,
    boxLayout: false,
    navDropdownIcon: 'style1', 
    navListIcon: 'style1',
    navActiveListColor: 'active-*', // active-dark
    navListTitleColor: 'title-default', // title-dark
    navListTitleHide: false,
    configBlock: false,
    layout6Background : 'linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%)',
    layout6BackSize : '', 
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import {Provider} from 'react-redux';
import {BrowserRouter} from 'react-router-dom';

import App from './App/index';
import * as serviceWorker from './serviceWorker';
import reducer from './store/reducer';
import config from './config';

const store = createStore(reducer);

const app = (
    <Provider store={store}>
        <BrowserRouter basename={config.basename}>
            {/* basename="/datta-able" */}
            <App />
        </BrowserRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

You want to change the value in the file, or just change the value in the imported object? — Dave Newton
– Dave Newton, Commented Oct 2, 2019 at 23:34
if I change the value in config there is no going back, what if user wants to switch it to light mode from dark and vice versa — Sam
– Sam, Commented Oct 2, 2019 at 23:37
@Sam you can make it available to change it via state in local storage. — Kirasiris
– Kirasiris, Commented Oct 2, 2019 at 23:38

Neskews · Accepted Answer · 2019-10-03 00:04:25Z

1

You can accomplish it by using the state hook. Here's an example (You can see my code in action here: https://codesandbox.io/s/thirsty-keller-cjqb8):

// put this in config.js
const initialConfig = {
  darkMode: true
};

const App = () => {
  // dark mode is initally true, because we used the config value as inital value for darkMode
  const [darkMode, setDarkMode] = useState(initialConfig.darkMode);

  // change handler that is invoked when we change the value of the checkbox
  const changeMode = ({ currentTarget: { checked } }) => setDarkMode(checked);

  return (
    // use className based on the value of darkMode
    <div className={darkMode ? "darkMode" : ""}>
      <label>
        <input checked={darkMode} type="checkbox" onChange={changeMode} />
        use dark mode
      </label>
    </div>
  );
};

I used the config as an inital value. However, you need a state that stores the information which mode is currently active.

edited Oct 3, 2019 at 0:04

answered Oct 2, 2019 at 23:59

Neskews

8341 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

This is not exactly what I'm looking for but you gave the partial answer. Thank you for that :)

Collectives™ on Stack Overflow

How to change values in config file dynamically in react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related