React-markdown: change or disable checkbox - [ ]

[untitledlt]

By default - [ ] renders <input type="checkbox" /> and it's changeable so that doesn't make any sense.
How can I replace checkbox with a custom element?

[bradbumbalough]

@untitledlt this is possible by passing in a custom renderer for listItem and then handle the checked property.

import {listItem as defaultListItem} from 'react-markdown/lib/renderers';

const renderListItem = props => {
  if (props.checked !== null && props.checked !== undefined) {
    return (
      // your checkbox component
    );
  }
  // otherwise default to list item
  return defaultListItem(props);
}


<ReactMarkdown
  source={value}
  renderers={{listItem: renderListItem}} />

Handling the click gets a little trickier. I solved it by specifying rawSourcePos={true} prop and then adding an onCheck function to the checkbox component that takes the line and value. When the checkbox is toggled simple update the line in your markdown string with the opposite checkbox text.

const generateCheckbox = checked => checked ? '- [x]' : '- [ ]';

const onToggle = (lineIndex, checked) {
  const lines = markdown.split('\n');

  lines[lineIndex] = lines[lineIndex].replace(
    generateCheckbox(!checked),
    generateCheckbox(checked)
  );

  updateMarkdownText(lines.join('\n'));
}

const Checkbox = (props) => {
  const lineIndex = props.sourcePosition.start.line - 1;
  const onToggle = props.onToggle(lineIndex, !props.checked);

  return (
    // your component
  );
}

(Note -- code is untested but based from a working example).