- 
+ 
+
+ 
+
+
Inspired by React-Use / VueUse / SolidJS-USE
+ +
+
+
1 and sys.argv[1] == "--check":
if original_text != text:
@@ -33,5 +30,20 @@ def main():
with open("README.md", "w") as f:
f.write(text)
+ with open("docs/book/src/introduction.md", "r") as f:
+ text = replace_functions_shield(count, f.read())
+
+ with open("docs/book/src/introduction.md", "w") as f:
+ f.write(text)
+
+def replace_functions_shield(count, original_text):
+ text = re.sub(
+ r'
+
+
+
+
+
+
diff --git a/examples/use_breakpoints/input.css b/examples/use_breakpoints/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_breakpoints/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_breakpoints/rust-toolchain.toml b/examples/use_breakpoints/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_breakpoints/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_breakpoints/src/main.rs b/examples/use_breakpoints/src/main.rs
new file mode 100644
index 0000000..b304392
--- /dev/null
+++ b/examples/use_breakpoints/src/main.rs
@@ -0,0 +1,151 @@
+use leptos::*;
+use leptos_use::docs::{demo_or_body, BooleanDisplay};
+use leptos_use::{breakpoints_tailwind, use_breakpoints, BreakpointsTailwind};
+
+#[component]
+fn Demo(cx: Scope) -> impl IntoView {
+ let breakpoints = breakpoints_tailwind();
+
+ let screen_size = use_breakpoints(cx, breakpoints.clone());
+
+ use BreakpointsTailwind::*;
+
+ let sm_width = *breakpoints.get(&Sm).expect("It's there!");
+
+ let current = screen_size.current();
+ let xs = screen_size.lt(Sm);
+ let xse = screen_size.le(Sm);
+ let sm = screen_size.between(Sm, Md);
+ let md = screen_size.between(Md, Lg);
+ let lg = screen_size.between(Lg, Xl);
+ let xl = screen_size.between(Xl, Xxl);
+ let xxl = screen_size.ge(Xxl);
+
+ let label_classes = "justify-self-end".to_string();
+ let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
+
+ view! { cx,
+ {move || format!("{:?}", current.get()) }
+
+ "xs"
+
+ " (< "
+ { move || sm_width.to_string() }
+ "px)"
+
+
+
+ ":"
+ "xs"
+
+ " (<= "
+ { move || sm_width.to_string() }
+ "px)"
+
+
+
+ ":"
+ "sm"
+
+
+ ":"
+ "md"
+
+
+ ":"
+ "lg"
+
+
+ ":"
+ "xl"
+
+
+ ":"
+ "xxl"
+
+
+ ":"
+