Global import for use on MDX files

[yansusanto]

import {data, calc} from "@/components/data";

Is possible to import the above component globally for me to use {data, calc} across all .mdx files? Currently, I'm importing it at all .mdx files.

Any help is much appreciated.

[dimaMachina]

provide them via this option https://nextra.site/docs/docs-theme/theme-configuration#mdx-components and you will not need to import your components on every mdx file

[yansusanto]

That's what I did but to no avail,

import React from "react";

import {data, calc} from "@/components/data";

export default {
    main: ({children}) => {
        return (
            {children}
        );
    },
    components: {
        data,
        calc,
        Bleed,
        Cards,
        Callout,
        Steps,
        Tabs,
    },
};

Am I missing something here?

[dimaMachina]

Does data and calc are react component?

[yansusanto]

Yes, it is

export const data = {
    italy: {
        population: 1000,
    },
    america: {
        population: 2000,
    },
};

const parseNumber = (value) => {
    if (typeof value === "string") {
        return parseFloat(value.replace(/,/g, ""));
    }
    return value;
};

export const calc = (value, percentage, period = "Y") => {
    const parsedValue = parseNumber(value);
    let result = (parsedValue * percentage) / 100;

    return result.toLocaleString(undefined, {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    });
};

[dimaMachina]

They are not react components but object and function

[yansusanto]

You are right, it is not. I guess I have to just import it into every mdx file.

[dimaMachina]

You can also try to assign them to globalThis in _app file and after they will be globally accessible

[yansusanto]

Thank you for the pointer, @dimaMachina. You are the best!

import Inter from "@/components/font";
import "@/styles/app.scss";
import {data, calc} from "@/components/data";

export default function App({Component, pageProps}) {
    globalThis.data = data;
    globalThis.calc = calc;

    return (
        <Inter>
            <Component {...pageProps} />
        </Inter>
    );
}