@@ -382,8 +382,24 @@ impl ToTokens for ParsedComponent {
382
382
///
383
383
/// Custom components are defined by adding this macro to a function that returns an `Element`:
384
384
///
385
- /// ```no_run
386
- #[ doc = include_str ! ( "../examples/counter.rs" ) ]
385
+ /// ```
386
+ /// # use iocraft::prelude::*;
387
+ /// # use std::time::Duration;
388
+ /// #[component]
389
+ /// fn Counter(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
390
+ /// let mut count = hooks.use_state(|| 0);
391
+ ///
392
+ /// hooks.use_future(async move {
393
+ /// loop {
394
+ /// smol::Timer::after(Duration::from_millis(100)).await;
395
+ /// count += 1;
396
+ /// }
397
+ /// });
398
+ ///
399
+ /// element! {
400
+ /// Text(color: Color::Blue, content: format!("counter: {}", count))
401
+ /// }
402
+ /// }
387
403
/// ```
388
404
///
389
405
/// The function is allowed to take up to two arguments, one named `props`, for the component's
@@ -392,7 +408,60 @@ impl ToTokens for ParsedComponent {
392
408
/// Here is an example of a component that takes a reference to a `Vec` of `User` structs via properties:
393
409
///
394
410
/// ```
395
- #[ doc = include_str ! ( "../examples/table.rs" ) ]
411
+ /// # use iocraft::prelude::*;
412
+ /// # struct User {
413
+ /// # id: i32,
414
+ /// # name: String,
415
+ /// # email: String,
416
+ /// # }
417
+ /// #[derive(Default, Props)]
418
+ /// struct UsersTableProps<'a> {
419
+ /// users: Option<&'a Vec<User>>,
420
+ /// }
421
+ ///
422
+ /// #[component]
423
+ /// fn UsersTable<'a>(props: &UsersTableProps<'a>) -> impl Into<AnyElement<'a>> {
424
+ /// element! {
425
+ /// Box(
426
+ /// margin_top: 1,
427
+ /// margin_bottom: 1,
428
+ /// flex_direction: FlexDirection::Column,
429
+ /// width: 60,
430
+ /// border_style: BorderStyle::Round,
431
+ /// border_color: Color::Cyan,
432
+ /// ) {
433
+ /// Box(border_style: BorderStyle::Single, border_edges: Edges::Bottom, border_color: Color::Grey) {
434
+ /// Box(width: 10pct, justify_content: JustifyContent::End, padding_right: 2) {
435
+ /// Text(content: "Id", weight: Weight::Bold, decoration: TextDecoration::Underline)
436
+ /// }
437
+ ///
438
+ /// Box(width: 40pct) {
439
+ /// Text(content: "Name", weight: Weight::Bold, decoration: TextDecoration::Underline)
440
+ /// }
441
+ ///
442
+ /// Box(width: 50pct) {
443
+ /// Text(content: "Email", weight: Weight::Bold, decoration: TextDecoration::Underline)
444
+ /// }
445
+ /// }
446
+ ///
447
+ /// #(props.users.map(|users| users.iter().enumerate().map(|(i, user)| element! {
448
+ /// Box(background_color: if i % 2 == 0 { None } else { Some(Color::DarkGrey) }) {
449
+ /// Box(width: 10pct, justify_content: JustifyContent::End, padding_right: 2) {
450
+ /// Text(content: user.id.to_string())
451
+ /// }
452
+ ///
453
+ /// Box(width: 40pct) {
454
+ /// Text(content: user.name.clone())
455
+ /// }
456
+ ///
457
+ /// Box(width: 50pct) {
458
+ /// Text(content: user.email.clone())
459
+ /// }
460
+ /// }
461
+ /// })).into_iter().flatten())
462
+ /// }
463
+ /// }
464
+ /// }
396
465
/// ```
397
466
#[ proc_macro_attribute]
398
467
pub fn component ( _attr : TokenStream , item : TokenStream ) -> TokenStream {
0 commit comments