Skip to main content

Configurations Philosophy

Mongez relys on three levels of configurations:

  1. Inline Configuration
  2. Global Configuration
  3. Default Configuration

Let's understand the difference between these types of configurations by a good example.

Assume we've a component that displays a rendered text with color.

import React from 'react';
export default function Colored({ children }) {    const style = {        color: '#62b8f5',    }    return (        <div style={style}>{children}</div>    )}

Now let's add another feature that allows us to set other colors to the component

import React from 'react';
export default function Colored({ children, color = '#62b8f5' }) {    const style = {        color: color,    }    return (        <div style={style}>{children}</div>    )}

Adding this simple feature allows us to reuse the same component with different colors

import Colored from 'ColoredComponent';
<Colored color="red">My Red Colored Text</Colored>

Result

My Red Colored Text

Let's recap it in a bit cleaner manner

import Colored from 'ColoredComponent';
<Colored>My Colored Text</Colored>

Result

My Colored Text

Now we can see that the component is shipped with default color, but allows you to pass an inline color to the called component only.

Global Configurations#

The global configurations allows you to override the default configurations without passing the value for each component call.

Let's add anoher beautiful feature that allows us to override the default color only once.

import React from 'react';
/** * Override the component configurations by overriding the default onces *  * @param {object} newConfigurations * @returns {void}  */export function config(newConfigurations) {    configurations = Object.assign({}, configurations, newConfigurations);}
// initialize the configurations for first timeconfig(defaultConfigurations);
export default function Colored({ children, color = configurations.color }) {    const style = {        color: color,    }    return (        <div style={style}>{children}</div>    )}

Let's see what is new in our latest snippet.

There is one new variable, one new constant and one new exported function.

  • The constant defaultConfigurations has the built-in component configurations that will be used by default.
  • The constant configurations is where the component will use for its render options, this variable can be overriden by the config function.
  • The export function config is where you can override the default configurations for the component.

Finally, we updated the color prop to take its value from the configurations variable.

import Colored from 'ColoredComponent';
<Colored>My Colored Text</Colored>

Result

My Colored Text