srOnlyString.jsx

const srOnlyString = (string, limit, limiter) => {
  if (string.length <= limit) {
    return string;
  }

  const styles = {
    position: 'absolute',
    width: 1,
    height: 1,
    margin: -1,
    padding: 0,
    border: 0,
    overflow: 'hidden',
    clip: 'rect(0,0,0,0)',
  }

  const stringLimiter = limiter ? limiter : '…';

  const textToShow = string.substring(0, limit);
  const textToHide = string.substring(limit, string.length);

  return (
    <React.Fragment>
      {textToShow}
      <span aria-hidden="true">{stringLimiter}</span>
      <span style={ styles }>
        {textToHide}
      </span>
    </React.Fragment>
  )
}