Skip to content

Commit

Permalink
Generate documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
niwinz committed Dec 26, 2023
1 parent 86b567f commit 2c683df
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions latest/user-guide.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ <h3><a href="#native-elements" id="native-elements"></a>Native elements</h3>
<h3><a href="#user-defined-components" id="user-defined-components"></a>User defined components</h3>
<p>Components are everything that we as users define.</p>
<p>In this case we have two ways to call our component (or in react words, create the react-dom element from a user-defined component):</p>
<p>A: The first is when we have 100% control of the props and we do not want any type of transformation to be done to them (usually when we are talking about large components, you probably do not reuse that they represent a page or a section of that page).</p>
<p>B: And the second is when we are creating a reusable component that is probably wrapping one or more native elements of the virtual dom and we simply want to extend its behavior controlling only a subset of props, where the rest of the props that are not controlled would be passed as is. to the next native element.</p>
<p><strong>A</strong>: The first is when we have 100% control of the props and we do not want any type of transformation to be done to them (usually when we are talking about large components, you probably do not reuse that they represent a page or a section of that page).</p>
<p><strong>B</strong>: And the second is when we are creating a reusable component that is probably wrapping one or more native elements of the virtual dom and we simply want to extend its behavior controlling only a subset of props, where the rest of the props that are not controlled would be passed as is. to the next native element.</p>
<p>For the <strong>A</strong> case, we will use the <code>[:&amp; ...]</code> handler:</p>
<pre><code class="language-clojure">(mf/defc title
{::mf/props :native}
Expand All @@ -100,18 +100,18 @@ <h3><a href="#user-defined-components" id="user-defined-components"></a>User def
[:&gt; button {:name "foobar" :on-click some-fn}])
</code></pre>
<p>You can see that when using the <code>[:&gt;</code> handler we pass the props using lisp-style syntax which are automatically transformed into camelCase, and the component receives the parameters in a raw or native form from react (that is, in camelCase).</p>
<p>Remember that <code>::mf/props :native</code> should probably be a default, so all components you define should have that metadata; In any case, that does not affect at all what is said in the previous paragraph.</p>
<p>For syntax convenience, if the component is named with an <code>*</code> at the end of the name or it uses the <code>::mf/props-destructuring :lisp-to-camel</code> prop in the metadata along with <code>::mf/props :native</code>, the destructuring can use the lisp-case and the macro will automatically access the value with camelCase from the props.</p>
<p>Remember that <code>::mf/props :native</code> should probably be a default, so all components you define should have that metadata.</p>
<p>For convenience, if the component is named with an <code>*</code> at the end of the name or it has the <code>::mf/props-destructuring :lisp-to-camel</code> prop in the metadata along with <code>::mf/props :native</code>, the destructuring can use the lisp-case and the macro will automatically access the value with camelCase from the props.</p>
<pre><code>(mf/defc button*
{::mf/props :native}
[{:keys [name on-clic]}]
[:button {:on-click on-click} name])

(mf/defc my-big-component
[]
[:&gt; button {:name "foobar" :on-click some-fn}])
[:&gt; button {:name "foobar" :onClick some-fn}])
</code></pre>
<p>The <strong>B</strong> case is also useful if the intention is for the components to be reusable externally, in non-clojure code bases (for example in a storybook).</p>
<p>The <strong>B</strong> case is also useful if the intention for the components is to be reusable externally, in non-clojure code bases (for example in a storybook).</p>
<h2><a href="#higher-order-components" id="higher-order-components"></a>Higher-Order Components</h2>
<p>This is the way you have to extend/add additional functionality to a function component. Rumext exposes one:</p>
<ul>
Expand Down

0 comments on commit 2c683df

Please sign in to comment.