React-dropzone: make only part of the text clickable

Question

I'm using react-dropzone for uploading stl files to my website and I'm stuck on how to make only part of the text clickable. For this example, I want "STL files" to be blue and when clicked it opens up file explorer, but have the rest of the text be static. Is this possible? Here's my code so far:

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function DropZone() {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: 'model/stl'
  });

  return (
    <div {...getRootProps()}>
        <input {...getInputProps()} />
        <div>
            Drag and drop your STL files here.
        </div>
    </div>
  );
}

export default DropZone;

Answer 1

To achieve this, set the noClick and noKeyboard props of the useDropzone hook to true to disable the default click and keyboard events.

const { getRootProps, getInputProps, open } = useDropzone({
  onDrop,
  accept: {
    'model/stl': ['.stl'],
  },
  noClick: true,
  noKeyboard: true,
});

Then use the open function to open the file dialog when the user clicks on the desired text. You can use a span for this with css styling to make "STL files" appear blue and clickable.

<div {...getRootProps()}>
  <input {...getInputProps()} />
    Drag and drop your&nbsp;
    <span onClick={open} style={{color: 'blue', textDecoration: 'underline', cursor: 'pointer'}}>STL files</span>
    &nbsp;here
</div>