obsidian-react-components icon indicating copy to clipboard operation
obsidian-react-components copied to clipboard

Code reuse in multiple components

Open ohol-vitaliy opened this issue 4 years ago • 2 comments

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

ohol-vitaliy avatar Oct 10 '21 13:10 ohol-vitaliy

components are technically functions, so you can do something like

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

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

Usage:
```jsx:
<div>A random number is {myRand()}</div>
```

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

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

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

return { add };
```

Usage:
```jsx:
const {add} = utils();
<div>The sum of 1 and 2 is {add(1,2)}</div>
```

elias-sundqvist avatar Oct 10 '21 20:10 elias-sundqvist

customJS plugin also works with jsx.

MeepTech avatar Oct 07 '22 06:10 MeepTech