Print function that works anywhere running JavaScript or TypeScript
Although I wrote the source code for the package, there is one person (with a site he made) and an article that inspires me.
Emin Yormaz - (ItemSatis Search Placeholder)
Michael Smart - (ES6 Generators in JavaScript, a Real-World Use Case)
link: https://levelup.gitconnected.com/es6-generators-in-javascript-9cc301ed7665
This is a print package. It serves to print text just as if you clicked on a keyboard at certain intervals.
In addition, it has deletion. With this feature you can create amazing placeholders of search inputs!
To include this package in your project, run the following command:
npm install @ssibrahimbas/writer
or with yarn
yarn add @ssibrahimbas/writer
And try this:
import { ListWriter } from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
listWriter.writeList(console.log, ["Sami", "Salih"])And this result:
S
Sa
Sam
Sami
Sam
Sa
S
S
Sa
Sal
Sali
Salih
Sali
Sal
Sa
S
<script setup lang="ts">
import {reactive, onMounted} from "vue"
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
type State = {
placeholder: string;
list: Array<string>;
}
const state = reactive<State>({
placeholder: "",
list: ["Macbook Pro", "Tea", "Cookie", "Cool Lime", "White Chocolate Mocha", "Ice Latte"]
})
const setPlaceholder = (val : string) : void => {
state.placeholder = val;
}
onMounted(() : void => {
listWriter.writeList(setPlaceholder, state.list);
})
</script>
<template>
<input :placeholder="state.placeholder" />
</template><script setup>
import {reactive, onMounted} from "vue"
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
const state = reactive({
placeholder: "",
list: ["Macbook Pro", "Tea", "Cookie", "Cool Lime", "White Chocolate Mocha", "Ice Latte"]
})
const setPlaceholder = (val) => {
state.placeholder = val;
}
onMounted(() => {
listWriter.writeList(setPlaceholder, state.list);
})
</script>
<template>
<input :placeholder="state.placeholder" />
</template>import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
const inputEL = document.querySelector("#my-input");
const list = ["Macbook Pro", "Tea", "Cookie", "Cool Lime", "White Chocolate Mocha", "Ice Latte"];
const setPlaceholder = (val) => {
inputEL.placeholder = val;
}
listWriter.writeList(setPlaceholder, list);import React, { useState, useEffect } from 'react';
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
const SearchBar = () => {
const [placeholder, setPlaceholder] = useState("");
useEffect(() => {
const list = [
"Macbook Pro",
"Tea",
"Cookie",
"Cool Lime",
"White Chocolate Mocha",
"Ice Latte",
];
listWriter.writeList(setPlaceholder, list);
}, []);
return <input placeholder={placeholder} />;
}import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeWord(console.log, "Tea or Cookie")With word writer you can trigger and customize words typing, erasing and typing and deleting animations.
Abstract:
writeWord(render: Render, word: string, options?: WriteWordOptions) : Promise<void>;Type WriteWordOptions:
{
writerSpeed?: number; // default 60
}Example with non customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeWord(console.log, "Tea or Cookie")Example with customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeWord(console.log, "Tea or Cookie", {writerTime: 300})Note: the writerTime option here is in ms, default 250
Abstract:
removeWord(render: Render, word: string, options?: RemoveWordOptions) : Promise<void>;Type RemoveWordOptions:
{
removeSpeed?: number; // default 30
}Example with non customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.removeWord(console.log, "Tea or Cookie")Example with customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.removeWord(console.log, "Tea or Cookie", {removeSpeed: 300})Abstract:
writeAndRemoveWord(render: Render, word: string, options?: WriteAndRemoveWordOptions) : Promise<void>;Type WriteAndRemoveWordOptions:
{
// all fields are in milliseconds
writerSpeed?: number; // default 60
removeSpeed?: number; // default 60
waitProcessTime?: number; // how long to wait between remove or write, default 500
waitProcessEndTime?: number; // the amount of time to wait after the erase operation is finished and possibly before the write operation begins, default 0
infinite?: boolean; // use infinite list writer, default null
}Example with non customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeAndRemoveWord(console.log, "Tea or Cookie")Example with customized:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeAndRemoveWord(console.log, "Tea or Cookie", {removeSpeed: 300, writerSpeed: 200, waitProcessTime: 1000, waitProcessEndTime: 500})Stops writing for the writeAndRemoveWord function.
Cancels at the start of the next word.
Example:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeAndRemoveWord(console.log, "Tea or Cookie", {removeSpeed: 300, writerSpeed: 200, waitProcessTime: 1000, waitProcessEndTime: 500})
setTimeout(() => {
wordWriter.stop();
}, 500)Start writing for the writeAndRemoveWord function.
Example:
import {WordWriter} from "@ssibrahimbas/writer"
const wordWriter = new WordWriter();
wordWriter.writeAndRemoveWord(console.log, "Tea or Cookie", {removeSpeed: 300, writerSpeed: 200, waitProcessTime: 1000, waitProcessEndTime: 500})
setTimeout(() => {
wordWriter.stop();
setTimeout(() => {
wordWriter.start();
wordWriter.writeAndRemoveWord(console.log, "Tea or Cookie", {removeSpeed: 300, writerSpeed: 200, waitProcessTime: 1000, waitProcessEndTime: 500})
}, 1600)
}, 500)With ListWriter, you can use your lists with printing and deletion animations.
Abstract
writeList(render: Render, list: string[], options?: WriteAndRemoveListOptions) : Promise<void>type WriteAndRemoveListOptions:
// all fields are in milliseconds
writerSpeed?: number; // default 60
removeSpeed?: number; // default 30
waitProcessTime?: number; // how long to wait between remove or write, default 0
waitWordTime?: number; // how long to wait between list items, default 300
waitProcessEndTime?: number; // the amount of time to wait after the erase operation is finished and possibly before the write operation begins, default 500
infinite?: boolean; // use infinite list writer, default trueExample with non customized:
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
listWriter.writeList(console.log, ["Tea or Cookie", "Coffee?", "Yes Sure"])Example with customized:
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
listWriter.writeList(console.log, ["Tea or Cookie", "Coffee?", "Yes Sure"], {removeSpeed: 300, writerSpeed: 200, waitProcessTime: 1000, waitWordTime: 1000, waitProcessEndTime: 500})Stops writing for the writeList function.
Cancels at the start of the next word.
Example:
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
listWriter.writeList(console.log, ["Tea or Cookie", "Coffee?", "Yes Sure"])
setTimeout(() => {
listWriter.stop();
}, 500)Start writing for the writeList function.
Example:
import {ListWriter} from "@ssibrahimbas/writer"
const listWriter = new ListWriter();
listWriter.writeList(console.log, ["Tea or Cookie", "Coffee?", "Yes Sure"])
setTimeout(() => {
listWriter.stop();
setTimeout(() => {
listWriter.start();
listWriter.writeList(console.log, ["Tea or Cookie", "Coffee?", "Yes Sure"])
}, 1600)
}, 500)The render function.
(val: string) => any | Promise<any>;