elias-sundqvist / obsidian-react-components

Write and use React (Jsx) components in your Obsidian notes.
GNU Affero General Public License v3.0
246 stars 18 forks source link

Code reuse in multiple components #21

Open ohol-vitaliy opened 3 years ago

ohol-vitaliy commented 3 years ago

It would be great to have a way to reuse code (functions) in multiple components

elias-sundqvist commented 3 years ago

components are technically functions, so you can do something like

---
defines-react-components: true
---

Definition:
```jsx:component:myRand
return Math.random()

Usage:

<div>A random number is {myRand()}</div>

Or, if you want to define more complex functions with multiple arguments, you can do something like

````md
---
defines-react-components: true
---

Definition:
```jsx:component:utils
function add(a, b) {
   return a+b;
}

return { add };

Usage:

const {add} = utils();
<div>The sum of 1 and 2 is {add(1,2)}</div>
MeepTech commented 2 years ago

customJS plugin also works with jsx.