Listeners and callbacks

So, in answer to the first question H5P is in the window object (yay) so I can init() it from wherever.
In react I am doing it as follows, listening for history change. It's not quite there yet but it's a start and now I know how to init().
The key is H5P.init('.h5p-iframe-wrapper');

const CustomParagraph = (props) => {

  let history = useHistory();

  useEffect(() => {
    try {
      let H5P = window.H5P;
      setTimeout(() => {
        H5P.init('.h5p-iframe-wrapper');
      }, "10");
    }
    catch (err) {
      console.error('Missing H5P.');
    }
  }, [history]);

  const StyledBox = withStyles((theme) => ({
    root: {
      marginBottom: theme.spacing(4),
    },
  }))(Box);

  return (
    <StyledBox>
      <LessonGrid>
        <div className='h5p-iframe-wrapper'>
          <iframe
            id={`h5p-iframe-${props.componentId}`}
            className='h5p-iframe'
            data-content-id={props.componentId}
            frameBorder='0'
            scrolling='no'
            lang='en'
            title={`Component frame ${props.componentId}`}>
          </iframe>
        </div>
      </LessonGrid>
    </StyledBox>
  );
};

And in answer to the seconds, is this ? using xAPI

        H5P.externalDispatcher.on('xAPI', function(event){
          const max = event.getMaxScore();
          const score = event.getScore();
          const verb = event.getVerb();
          if (score === max && max > 0){
            console.error(verb);
            console.error('Complete');
          }
        });

Thank you Docs - https://h5p.org/documentation/developers/x-api-event#setScoredResult