dioxus_type_animation/
lib.rs

1//! Dioxus port of the `react-type-animation` typewriter component.
2//!
3//! The main entry point is [`TypeAnimation`]. It mirrors the React library's
4//! feature set with Dioxus-friendly Rust types: a sequence of text, delays, and
5//! callbacks; configurable speed/deletion speed; finite or infinite repetition;
6//! wrapper element selection; optional cursor CSS; and custom text splitting.
7//!
8//! # Example
9//!
10//! ```rust,no_run
11//! use dioxus::prelude::*;
12//! use dioxus_type_animation::{Repeat, SequenceElement, Speed, TypeAnimation};
13//!
14//! fn App() -> Element {
15//!     rsx! {
16//!         TypeAnimation {
17//!             sequence: vec![
18//!                 SequenceElement::from("We produce food for Mice"),
19//!                 SequenceElement::from(1000_u64),
20//!                 SequenceElement::from("We produce food for Hamsters"),
21//!                 SequenceElement::from(1000_u64),
22//!             ],
23//!             speed: Speed::Preset(50),
24//!             repeat: Repeat::Infinite,
25//!             style: Some("font-size: 2em; display: inline-block;".to_string()),
26//!         }
27//!     }
28//! }
29//! ```
30
31#![allow(non_snake_case)]
32
33mod animation;
34mod repeat;
35mod sequence;
36mod speed;
37mod type_animation;
38mod wrapper;
39
40pub use repeat::Repeat;
41pub use sequence::{SequenceCallback, SequenceElement, StringSplitter};
42pub use speed::Speed;
43pub use type_animation::{TypeAnimation, TypeAnimationProps};
44pub use wrapper::Wrapper;
45
46pub(crate) const CURSOR_CLASS: &str = "dioxus-type-animation__type";
47
48/// CSS used by [`TypeAnimation`] when `cursor` is enabled.
49///
50/// The component injects this stylesheet automatically. It is also exported so
51/// applications can include it globally if they prefer.
52pub const CURSOR_CSS: &str = r#"
53.dioxus-type-animation__type::after {
54  content: '|';
55  animation: dioxus-type-animation__cursor 1.1s infinite step-start;
56}
57
58@keyframes dioxus-type-animation__cursor {
59  50% {
60    opacity: 0;
61  }
62}
63"#;
dioxus_type_animation/lib.rs

dioxus_type_animation/
lib.rs
