React HTML Writer

Here are some components that will allow you to animate HTML writing on your React application.

Installation

$ npm i react-html-writer

Components

Tag

<Tag></Tag>

As a normal HTML tag, you can nest as much Tag and Text components as you want.

| Propertie | Type | Description | | --------- | ------- | --------------------------------------------------------------------------------- | | name | String | Define the tagname (div, span, ...) | | attr | Object | Add attributes to your tags ( These attributes do not affect child components ) | | open | Boolean | Open de tags when the writing is finished | | loop | Boolean | Loop the animation |

Text

<Text />

This component is only used to write strings. The Text component is complitely independent from the Tag component, which means that you can use it by itself to simulate keyboard simple text writing.

| Propertie | Type | Description | | --------- | ------ | -------------------------- | | text | String | Define the string to write | | style | Object | Style the defined text |

Styling

You can change the color of each part of your Text and Tags.

<Text /> can be styled via the style property from react.

<Tag></Tag> in the other hand are customizable through the theme prop. You can use those to change colors, sizes, and fonts.

| Variable | Description | | --------------------- | ----------------------------------------------------- | | cursorColor | the cursor color | | textColor | text color | | tagHookColor | hooks color, so the greater and minus than ("<", ">") | | tagNameColor | tag names color | | attrNameColor | the attributes name color | | attrSymbolColor | symbols color, the "=" symbol basically | | attrQuoteColor | attributes name color | | attrValueColor | attributes value color | | selectColor | the selection color | | selectBackgroundColor | the background selection color | | fontSize | the font size | | fontFamily | the font | | tagTabsize | tabulation size on indentation |

Usage

For a full demo with animtions, try this CodeSandBox or use the Demo page npm run demo.

A simple usage with a simple HelloWorld.

import React from 'react'
import { Tag, Text } from 'react-html-writer'

const HelloWorld = () => (
	<Tag name="h1">
		<Text text="Hello World!" />
	</Tag>
)

export default HelloWorld

The end result will look like this. ( no animation )

<h1>Hello World !</h1>

If you want to import the library via the script tag in your HTML file, you can by using the HTMLWriter global object.

Todolist

• [x] Create or choose a theme for each component (color, font, size, ...)
• [ ] Add a duration setting
• [ ] Add a timeline
• [x] Add @types