flexx
v1.1.4
Published
Flexx is a handy JavaScript library that makes it easy to add interactive and dynamic elements to your web projects. It's designed to help you create a more engaging and smooth user experience with minimal effort.
Downloads
8
Maintainers
abuhuraira-khanReadme
Docs & Installation
Installation
NPM
npm install flexxCDN
coming soonUsage & Example
Initialize FlexxTyping
Basic AutoTyping
- HTML
new FlexxTyping("#text", { textList: ["Hello, world!"], speed: 100, }); - React
useEffect(() => { new FlexxTyping(textRef.current, { textList: ["Hello, world!"], speed: 100, domSyntax: "react", }); }, []);
Customize the Cursor
To get the default typing cursor with a customizable design:
new FlexxTyping("#text", {
textList: ["Hello, world!"],
speed: 100,
cursorColor: "#ff0000",
cursorHeight: "1em",
cursorWidth: "2px",
});If you don't want the default cursor, you can disable it:
new FlexxTyping("#text", {
textList: ["Hello, world!"],
speed: 100,
cursor: false,
});Multiple Text & Looping AutoTyping
To initialize multiple text options with looping:
new FlexxTyping("#text", {
textList: ["Hello, world!", "Welcome to Flexx!"],
speed: 100,
loop: true,
});All Properties
new FlexxTyping("type string", {
textList, // type: array
speed, // type: number
cursorColor, // type: string
cursorHeight, // type: string
cursorWidth, // type: string
cursor, // type: boolean
loop, // type: boolean
});Syntax With More Explanation
HTML Syntax
<p id="text"></p>JavaScript Syntax
new FlexxTyping("#text", {
textList: ["Hello, world!"],
speed: 100,
});React Syntax
import { useEffect,useRef } from 'react';
import { FlexxTyping } from 'flexx';
export default const App = () => {
const textRef = useRef(null);
useEffect(() => {
new FlexxTyping(textRef.current, {
textList: ["Hello, world!", "Welcome to Flexx!"],
speed: 100,
domSyntax: 'react'
});
},[])
return(
<div>
<p ref={textRef}></p>
</div>
);
}