Skip to content

Commit

Permalink
Pass setProps function to React components
Browse files Browse the repository at this point in the history
Since React does not have any standard way of writing values back,
it does not make sense to attempt any automagic solution.
This simply allows developers to handle the changes themselves

If a property called `setProps` is used, it has precedence, so then it's
not possible to update it
  • Loading branch information
exyi committed Sep 11, 2022
1 parent 4cb9cb1 commit 3d55501
Showing 1 changed file with 13 additions and 2 deletions.
15 changes: 13 additions & 2 deletions src/Framework/JsComponent.React/dotvvm-react.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,20 @@ export class KnockoutTemplateReactComponent extends React.Component<KnockoutTemp
}
}

/** Converts React component to DotVVM component usable through `<js:MyComponent />` syntax (or the JsComponent class)
* See [the complete guide](https://www.dotvvm.com/docs/4.0/pages/concepts/client-side-development/integrate-third-party-controls/react).
*
* The component will receive all properties, commands and templates as it's React props.
* * Properties are plain JS objects and values, notably they don't contain any knockout observables
* * Commands are functions returning a promise, optionally expecting arguments if they were specified in the dothtml markup
* * Templates are only string IDs which can be passed to the `<KnockoutTemplateReactComponent templateName={props.theTemplate} />` component
*
* Additional property `setProps` is passed to the component, which can be used to update the component's properties (if the bound expression is updatable, otherwise it will throw an error).
* * Usage: `props.setProps({ myProperty: props.myProperty + 1 })`
*/
export const registerReactControl = (ReactControl, defaultProps = {}) => ({
create: (elm, props, commands, templates) => {
const initialProps = { ...defaultProps, ...commands, ...templates }
create: (elm, props, commands, templates, setProps) => {
const initialProps = { setProps, ...defaultProps, ...commands, ...templates }
let currentProps = { ...initialProps, ...props };
ReactDOM.render(<ReactControl {...currentProps} />, elm);
return {
Expand Down

0 comments on commit 3d55501

Please sign in to comment.