Is there a way to add onClick event to line wrap?

I’m looking to add event to each line through an onClick property.

Essentially, I wanna highlight a row on click and create a popup. I’m looking into the highlight’s wrapLinesInSpan function, but I am not sure how to make it work. https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/highlight.js#L78

I am very impressed with this project and really hope that someone has already ran into a similar issue.

My code is below, mostly pulled from examples. As you can see I’m struggling with how to hit handleLineClicked from each <span> element.

import React, { Component } from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { monokaiSublime } from 'react-syntax-highlighter/styles/hljs';
import './App.css';

const CODE = 
`  const woah = fun => fun + 1;
  const dude = woah(2) + 3;
  function thisIsAFunction() {
    return [1,2,3].map(n => n + 1).filter(n !== 3);
  }
  console.log('making up fake code is really hard');

  function itIs() {
    return 'no seriously really it is';
  }
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lineToHighlight: null
    };
  }

  handleLineClicked(e) {
    // const lineNum = e.Something;
    // this.setState({lineToHighlight: lineNum});
    console.log('something has been clicked:', e);
  }
  render() {
    return (
      <div className="App">
        <div style={{paddingTop: 20, display: 'flex'}}>
          <div style={{flex: 1, width: '100%', flexDirection: 'column'}}>
            <SyntaxHighlighter 
              style={monokaiSublime} 
              wrapLines={true}
              showLineNumbers={true}
              lineStyle={lineNumber => {
                let style = { display: 'block' };
                if (this.state.lineToHighlight === lineNumber) {
                  style.backgroundColor = 'rgb(41, 62, 98)';
                }
                return style;
              }}
            >
              {CODE}
            </SyntaxHighlighter>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[conorhastings]

@clevernyyyy cool, already started working this morning on what will likely be a major version release, allowing for arbitrary props to through to the lines, which will allow click events, so please leave open, thanks!

[clevernyyyy]

@conorhastings - you’re a legend mate, thank you!