leptos_declarative

Declarative components to represent control-flow and other useful constructs in the leptos web framework not directly provided by default.

This crate provides 2 main components

• If
• Portal

Usage

For more usage examples, please refer to the respective components' documentation, but here's a taste.

If

use leptos::*;
use leptos_declarative::prelude::*;

let (a, _) = create_signal(cx, true);
let (b, _) = create_signal(cx, false);

view! { cx,
  <If signal=a>
    <Then>"A is true!"</Then>
    <ElseIf signal=b>"B is true!"</ElseIf>
    <Else>"Both A and B are false!"</Else>
  </If>
};

Portal

use leptos::*;
use leptos_declarative::prelude::*;

struct PortalId;

view! { cx,
 <PortalProvider>
   <div>
     <h1>"Portal goes here!"</h1>
     <PortalOutput id=PortalId />
   </div>
   <Portal id=PortalId>
     <p>"I went through the portal!"</p>
   </Portal>
 </PortalProvider>
};

lib.rs:

Declarative components to represent control-flow and other useful constructs in the leptos web framework not directly provided by default.

This crate provides 2 main components

• If
• PortalInput

Usage

For more usage examples, please refer to the respective components' documentation, but here's a taste.

If

use leptos::*;
use leptos_declarative::prelude::*;

let (a, _) = create_signal(cx, true);
let (b, _) = create_signal(cx, false);

view! { cx,
<If signal=a>
  <Then>"A is true!"</Then>
  <ElseIf signal=b>"B is true!"</ElseIf>
  <Else>"Both A and B are false!"</Else>
</If>
};

Portal

use leptos::*;
use leptos_declarative::prelude::*;


struct PortalId;

view! { cx,
  <PortalProvider>
    <div>
      <h1>"Portal goes here!"</h1>
      <PortalOutput id=PortalId />
    </div>

    <PortalInput id=PortalId>
      <p>"I went through the portal!"</p>
    </PortalInput>
  </PortalProvider>
};