Running notes on H5P Development.

Translations #

• You can either pass translations down the entire component tree or just access them using react’s context:

import React from 'react';
import { useContext } from 'react';
import PropTypes from 'prop-types';
import {SequenceProcessContext} from '../../context/SequenceProcessContext';

function Comment(props) {

  const [comment, setComment] = useState(props.comment);

  const context = useContext(SequenceProcessContext);
  const translations = context.translations

Where the context looks like:

import React from 'react';

export const SequenceProcessContext = React.createContext({
  params: {},
  behaviour: {},
  id: null,
  language: 'en',
  translations: {},
  registerReset: () => {},
  reset: () => {},
  collectExportValues: () => {},
});

And it is loaded at initialisation:

  const root = createRoot(this.wrapper); 
  root.render(
	<SequenceProcessContext.Provider value={this}>
	  <Main
		{...this.params}
		id={contentId}
		language={language}
		collectExportValues={this.collectExportValues}
	  />
	</SequenceProcessContext.Provider>
  );
};