document conditional attributes

Author: ealmloff

docs-src/0.5/en/reference/context.md

@@ -16,7 +16,7 @@ We start with a `Meme` component, responsible for rendering a meme with a given
 {{#include src/doc_examples/meme_editor.rs:meme_component}}
 ```
 
-> Note that the `Meme` component is unaware where the caption is coming from – it could be stored in `use_signal`, `use_signal`, or a constant. This ensures that it is very reusable – the same component can be used for a meme gallery without any changes!
+> Note that the `Meme` component is unaware where the caption is coming from – it could be stored in `use_signal`, or a constant. This ensures that it is very reusable – the same component can be used for a meme gallery without any changes!
 
 We also create a caption editor, completely decoupled from the meme. The caption editor must not store the caption itself – otherwise, how will we provide it to the `Meme` component? Instead, it should accept the current caption as a prop, as well as an event handler to delegate input events to:
 

docs-src/0.5/en/reference/rsx.md

@@ -42,6 +42,20 @@ DemoFrame {
 
 > Note: Styles can be used directly outside of the `style:` attribute. In the above example, `color: "red"` is turned into `style="color: red"`.
 
+#### Conditional Attributes
+
+You can also conditionally include attributes by using an if statement without an else branch. This is useful for adding an attribute only if a certain condition is met:
+
+```rust, no_run
+{{#include src/doc_examples/rsx_overview.rs:conditional_attributes}}
+```
+
+```inject-dioxus
+DemoFrame {
+	rsx_overview::ConditionalAttributes {}
+}
+```
+
 #### Custom Attributes
 
 Dioxus has a pre-configured set of attributes that you can use. RSX is validated at compile time to make sure you didn't specify an invalid attribute. If you want to override this behavior with a custom attribute name, specify the attribute in quotes:

src/doc_examples/rsx_overview.rs

@@ -86,6 +86,16 @@ pub fn CustomAttributes() -> Element {
     // ANCHOR_END: custom_attributes
 }
 
+pub fn ConditionalAttributes() -> Element {
+    // ANCHOR: conditional_attributes
+    let large_font = true;
+    rsx!( div {
+        class: if large_font { "text-xl" },
+        "Hello, World!"
+    } )
+    // ANCHOR_END: conditional_attributes
+}
+
 pub fn Formatting() -> Element {
     // ANCHOR: formatting
     let coordinates = (42, 0);