README
Terminal Text Component
Component for text typing animation.
Installation
npm i @simpozio/terminal-text
Usage
Timeline
Timeline will render its items one by one in order defined by showOn and hideOn properties of items.
import {Timeline, EFFECT} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';
import {css} from 'styled-components';
const fadeAnimation = keyframes`
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
`;
const fade = css`${fadeAnimation} infinite 0.5s`;
function Component() {
const TimelineItems = [
{
showOn: 1,
hideOn: 2,
render: () => 'Simple text example',
delay: 1000
},
{
showOn: 2,
hideOn: 3,
type: 'delay',
delay: 2000
}
{
showOn: 3,
hideOn: 4,
effect: fade,
render: ItemComponent,
goNext: false,
onTypingDone: () => console.log('Timeline finished')
},
{
showOn: 4,
type: 'row',
render: (items) => <div className="wrapper">{ items }</div>,
items: [
{
render: () => 'Simple'
},
{
showOn: 5,
hideOn: 6,
effect: EFFECT.BLINK,
render: () => '_',
delay: 3000
},
{
showOn: 6,
render: () => ' text example'
},
]
}
];
return <Timeline items={TimelineItems} initialTime={5} startDelay={2000} />;
}
You can controls flow of Timeline by setting ref
to Timeline
import {useRef} from 'react';
import {Timeline} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';
function Component() {
const TimelineRef = useRef(null);
const TimelineItems = [
{
showOn: 1,
hideOn: 2,
render: () => 'Simple text example',
delay: 1000
}
];
return <Timeline ref={TimelineRef} items={TimelineItems} />;
}
And then you can use Timeline methods:
TimelineRef.next()
- increase Timeline inner counter by 1TimelineRef.setTime(number)
- set Timeline inner counter to passed valueTimelineRef.getTime()
- get value of Timeline inner counter
Single Terminal Text
import {TerminalText} from '@simpozio/terminal-text';
function Component() {
const textForTyping = 'Some example text';
return (
<TerminalText
className="my-terminal-text"
startDelay={2000}
avgTypingDelay={50}
onTypingDone={() => console.log('typing done')}>
{textForTyping}
</TerminalText>
);
}
Delay and Backspace
Delay
component will add typing delay inside target textBackspace
component add backspace animation inside target text
import {
TerminalText,
Delay,
Backspace
} from '@simpozio/terminal-text';
function Component() {
return (
<TerminalText>
Some
<Delay ms={1000} />
Valuable
<Backspace count={8} delay={500} />
Example
<Delay ms={1000} />
Text
</TerminalText>
);
}
Also you can use this components in TimelineItem render function:
import {
Timeline,
Backspace,
Delay
} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';
function Component() {
const TimelineItems = [
{
showOn: 1,
render: () => (
<div>
Some
<Delay ms={1000} />
Valuable
<Backspace count={8} delay={500} />
Example
<Delay ms={1000} />
Text
</div>
)
}
];
return <Timeline items={TimelineItems} />;
}
Properties
Timeline
items: TimelineItem[]
- array of TimelineItems configuration objectsstartDelay: number
- timeout (ms) before Timeline starts performinginitialTime: number
- number of Timeline step to start from
Timeline Item
type: 'row' | 'delay' | undefined
- type of item.'delay'
- item won't render any content, just setting up delay for next step.'row'
- item will render child Timeline Items, you can define wrappern component inrender
propertyundefined
- item will ignorerepeat
anditems
props, it will use it's render function
goNext: boolean
- iffalse
item won't go to next step automatically. Defaults totrue
delay: number
- timeout(ms) after text typed and before next steprender: function
- function for rendering child components or text, required if no type defined. Acceptsitems
props if type of item isrow
items: TimelineItem[]
- array of child TimelineItems configuration objects. Property supperted only by'row'
item typerepeat: number
- times to repeat delay and increase Timeline step. Property supported only by'delay'
item typeeffect: CSSProp
- Styled Components CSSProp Animation object. E.g. for blinking or fade effect. You can import default EFFECT.BLINK object for blink animation.onStart: function
- lifecycle hook called when TimelineItem component mountedonUpdate: function
- lifecycle hook called when TimelineItem component updatedonHide: function
- lifecycle hook called when TimelineItem component unmountedonTypingDone: function(next)
- lifecycle hook called when typing of text finished. Next method will be automatically called after this method, ifgoNext
property is set totrue
. Acceptsnext
method of Timeline as property.- Also supported
react-typist
properties. Look react-typist
Terminal Text
Wrapper around react-typist
component.
It accepts all it's properties. Look react-typist.
Delay
Wrapper around react-typist
Delay
component.
ms: number
- timeout(ms) for waiting before writing next character
Backspace
Wrapper around react-typist
Backspace
component.
count: number
- number of characters to deletedelay: number
- timeout(ms) before deleting