Skip to content

Commit d9ea7ed

Browse files
committed
include instanced functional components in readme
1 parent 57fcf89 commit d9ea7ed

1 file changed

Lines changed: 23 additions & 5 deletions

File tree

README.md

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ The syntax for writing components is based off of JSX, and is referred as 'CX' w
6666

6767
### Elements
6868

69-
An element consists of a name, some attributes, and some children:
69+
An element consists of an identifier, some attributes, and some children:
7070
```xml
7171
<Example />
7272
<Example foo="bar" />
@@ -76,6 +76,7 @@ An element consists of a name, some attributes, and some children:
7676
<Child2 />
7777
{DateTime.UtcNow}
7878
</Parent>
79+
<{interpolation}.Foo />
7980
```
8081

8182
Valid children of an element are:
@@ -622,9 +623,6 @@ var button = cx(
622623
);
623624
```
624625

625-
> [!NOTE]
626-
> You can't use string interpolations for element identifiers
627-
628626
Most components have constraints on what type of value is allowed (ex select.min should be an integer) and diagnostics will be reported on type mismatches
629627

630628
```tsx
@@ -706,7 +704,7 @@ You can define basic custom components which can be used within the CX syntax. A
706704
### Functional components
707705

708706
A functional component is a function that is:
709-
- `static`.
707+
- `static` or instanced qualified.
710708
- either `public` or `internal`.
711709
- returns a valid interpolation component type.
712710

@@ -735,6 +733,26 @@ public static CXMessageComponent SayHello(User)
735733
);
736734
```
737735

736+
#### Instanced functional components
737+
738+
You can specify an instance by qualifying the identifier of the functional component with an interpolation of the instance:
739+
740+
```cs
741+
742+
var instance = new MyClass();
743+
744+
var component = cx($"""
745+
<container>
746+
<{instance}.MyComponent />
747+
</container>
748+
""");
749+
750+
public class MyClass()
751+
{
752+
public CXMessageComponent MyComponent() => ...;
753+
}
754+
```
755+
738756
> [!TIP]
739757
> You can use default values for parameters to indicate an optional property.
740758

0 commit comments

Comments
 (0)