Читать json файл в Reactjs таким же образом, как я делаю это в Angular?

У меня есть файл json в папке assets моего проекта Angular. Я использую его для хранения общих подсказок и меток, чтобы не жестко кодировать их в своем HTML-коде. Сначала я покажу, как я читаю этот json файл в своем приложении.

Пример того, что у меня внутри:

"Tooltips": {
    "Editar": "Editar",
    "Eliminar": "Eliminar",
    "Ver": "Ver",
    "Footer": {
      "Facebook": "Seguinos en Facebook",
      "Twitter": "Seguinos en X",
      "Instagram": "Seguinos en Instagram",
      "Linkedin": "Seguinos en Linkedin",
      "YouTube": "Seguinos en YouTube"
    }
  }

У меня есть сервис, который предназначен для чтения этого json файла:

@Injectable()
export class ConfigService {
  private _tooltips: ITooltips
  constructor(private http: HttpClient) {
  }

  readData() {
    const promise = this.http
      .get('assets/config.json', { responseType: 'text' }).toPromise();

    promise.then(data => {
      const config = parseJson(data)
      this._tooltips = config['Tooltips']
    
    })

    return promise
  }

 public get tooltips(): ITooltips {
    return this._tooltips
  }

interface ITooltips {
  Editar: string,
  Ver: string,
  Eliminar: string,

  Footer: {
    Facebook: string,
    Twitter: string,
    Instagram: string,
    Linkedin: string,
    YouTube: string
  }
}

“parseJson” ссылается на этот метод, который использует библиотеку strip-json-comments:

export function parseJson(jsonText: string): any {
  const stripedJson = stripJsonComments(jsonText)
  const json = JSON.parse(stripedJson)

  return json
}

Код внутри app.module.ts:

export function initializeApp(config: ConfigService) {
  return () => config.readData()
}

@NgModule({
  declarations: [
  ],
  imports: [
  ],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true,
    }

  ],
  bootstrap: [AppComponent]
})

Все это позволяет мне внедрить сервис ConfigService в любой из моих компонентов и читать файл config.json, что, на мой взгляд, очень удобно.

Сейчас я собираюсь начать новый проект Reactjs на своей работе. У меня мало или совсем нет опыта в Reactjs, мы сначала пройдем кучу обучения, но я думал об этой конкретной части моего приложения на Angular.

Я хотел бы “перевести” этот код с Angular на Reactjs. Я хочу иметь возможность сопоставить файл json с одним или несколькими интерфейсами чем-то, похожим на сервис Angular, чтобы я мог внедрить его и читать файл из любого места в моем приложении Reactjs. Как я могу это сделать? Какие библиотеки вы порекомендуете?

Почему бы не использовать файл контекста вместо json, это лучший подход:

Сначала создайте файл с именем ToolTips.js

const Tooltips = {
    Editar: "Editar",
    Eliminar: "Eliminar",
    Ver: "Ver",
    Footer: {
        Facebook: "Seguinos en Facebook",
        Twitter: "Seguinos en X",
        Instagram: "Seguinos en Instagram",
        Linkedin: "Seguinos en Linkedin",
        YouTube: "Seguinos en YouTube"
    }
}

export { Tooltips }

Затем создайте файл контекста Tooltips, как это:

import React, { createContext, useContext } from 'react';
import { ToolTips } from '../Constants/ToolTips';

const ToolTipsContext = createContext();

export const ToolTipsProvider = ({ children }) => {
  return (
    <ToolTipsContext.Provider value={{ ToolTips }}>
      {children}
    </ToolTipsContext.Provider>
  );
};

export const useToolTips = () => useContext(ToolTipsContext);

Затем используйте контекст в приложении так:

import React from 'react';
import { ToolTipsProvider } from './context/ToolTipsContext';
import TooltipComponent from './components/TooltipComponent';

const App = () => {
  return (
    <ToolTipsProvider>
      <div>
        <h1>Мое приложение</h1>
        <AnyComponent/>
      </div>
    </ToolTipsProvider>
  );
};

export default App;

Затем вы можете использовать это в своем компоненте так:

import React from 'react';
import { useToolTips } from '../context/ToolTipsContext';

const AnyComponent= () => {
  const { Tooltips } = useToolTips();

  return (
    <div>
      <h2>Пример подсказок</h2>
      <ul>
        <li>{Tooltips.Editar}</li>
        <li>{Tooltips.Eliminar}</li>
        <li>{Tooltips.Ver}</li>
        <h3>Футер</h3>
        <ul>
          <li>{Tooltips.Footer.Facebook}</li>
          <li>{Tooltips.Footer.Twitter}</li>
          <li>{Tooltips.Footer.Instagram}</li>
          <li>{Tooltips.Footer.Linkedin}</li>
          <li>{Tooltips.Footer.YouTube}</li>
        </ul>
      </ul>
    </div>
  );
};

export default AnyComponent;

Таким образом, вы можете использовать подсказки в любом компоненте приложения, даже если страниц будет 1000, подсказки можно использовать во всех них без повторения кода.