React Components showcase

Share & showcase
2

Greetings. I am about 2 months deep into Obsidian and have not really touched React before. I saw the Obsidian React Components plugin and thought it would be a good way to get some more Notion functionality in my templates. In particular I wanted a dropdown select list to update front matter on a note. I can read the front matter data but I haven’t found out how to save it. Below is an example of what I have so far.

SelectIceCreamComponent.md:

import Select from 'https://cdn.skypack.dev/react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const [selectedOption, setSelectedOption] = useState();

const ctx = useContext(ReactComponentContext);
const frontmatter = ctx.markdownPostProcessorContext.frontmatter;

const handleChange = (e) => {
  setSelectedOption(e);
  //frontmatter['ice-cream'] = e;
  //console.log('frontmatter:', frontmatter);
};

if (frontmatter) {
  console.log('frontmatter', frontmatter);
  const label = frontmatter['ice-cream'];
  console.log('initial setting', label);
  const found = options.find(x => x.label === label);
  console.log('found', found);
  //if (found) handleChange(found);
}

return (
  <Select
    isClearable
    value={selectedOption}
    onChange={handleChange}
    options={options}
  />
);

Test React Select.md:

---

ice-cream: Vanilla

---

# 🍦 Favorite

🍦 Favorite

name:: Johnny

occupation:: Note Taker

\`\`\`jsx:

<SelectIceCreamComponent />

\`\`\`

Any help figuring this out will be appreciated.

2 Likes