@readme/markdown-magic/GlossaryItem.jsx

const React = require('react');
const PropTypes = require('prop-types');

const GlossaryTermsContext = require('./contexts/GlossaryTerms');

function GlossaryItem({ term, terms }) {
  const foundTerm = terms.find(i => term === i.term);

  if (!foundTerm) return null;

  return (
    <span className="glossary-tooltip" v={foundTerm.term}>
      <span className="glossary-item highlight">{foundTerm.term}</span>
      <span className="tooltip-content">
        <span className="tooltip-content-body">
          - <strong className="term">{foundTerm.term}</strong> - {foundTerm.definition}
        </span>
      </span>
    </span>
  );
}

GlossaryItem.propTypes = {
  term: PropTypes.string.isRequired,
  terms: PropTypes.arrayOf(
    PropTypes.shape({
      definition: PropTypes.string.isRequired,
      term: PropTypes.string.isRequired,
    })
  ).isRequired,
};

// eslint-disable-next-line react/display-name
module.exports = props => (
  <GlossaryTermsContext.Consumer>{terms => <GlossaryItem {...props} terms={terms} />}</GlossaryTermsContext.Consumer>
);

module.exports.GlossaryItem = GlossaryItem;