Skip to content

Commit

Permalink
Bump version number to 2.0.11. Ran prettier on all files
Browse files Browse the repository at this point in the history
  • Loading branch information
mattboldt committed Sep 23, 2019
1 parent 9010b2c commit a7dbc1c
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 61 deletions.
97 changes: 50 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,41 +12,40 @@ Typed.js is a library that types. Enter in any string, and watch it type at the

---

Installation
------------
## Installation

#### Choose One

~~~
```
npm install typed.js
yarn add typed.js
bower install typed.js
~~~
```

#### CDN

~~~html
<script src="https://cdn.jsdelivr.net/npm/[email protected].9"></script>
~~~
```html
<script src="https://cdn.jsdelivr.net/npm/[email protected].11"></script>
```

#### Setup

This is really all you need to get going.

~~~ javascript
```javascript
// Can also be included with a regular script tag
import Typed from 'typed.js';

var options = {
strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
typeSpeed: 40
}
};

var typed = new Typed(".element", options);
~~~
var typed = new Typed('.element', options);
```

## Wonderful sites that have used (or are using) Typed.js

Wonderful sites that have used (or are using) Typed.js
---
https://github.com/features/package-registry

https://slack.com/
Expand Down Expand Up @@ -76,68 +75,70 @@ https://www.powerauth.com/
---

### Strings from static HTML (SEO Friendly)

Rather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.

~~~ javascript
```javascript
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
~~~
```

~~~ html
```html
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
~~~
```

### Type Pausing

You can pause in the middle of a string for a given amount of time by including an escape character.

~~~ javascript
var typed = new Typed(".element", {
```javascript
var typed = new Typed('.element', {
// Waits 1000ms after typing "First"
strings: ["First ^1000 sentence.", "Second sentence."]
strings: ['First ^1000 sentence.', 'Second sentence.']
});
~~~
```

### Smart Backspacing

In the following example, this would only backspace the words after "This is a"

~~~ javascript
var typed = new Typed(".element", {
strings: ["This is a JavaScript library", "This is an ES6 module"],
```javascript
var typed = new Typed('.element', {
strings: ['This is a JavaScript library', 'This is an ES6 module'],
smartBackspace: true // Default value
});
~~~
```

### Bulk Typing

The following example would emulate how a terminal acts when typing a command and seeing its result.
The following example would emulate how a terminal acts when typing a command and seeing its result.

~~~ javascript
var typed = new Typed(".element", {
strings: [
"git push --force ^1000\n `pushed to origin with option force`"
]
```javascript
var typed = new Typed('.element', {
strings: ['git push --force ^1000\n `pushed to origin with option force`']
});
~~~
```

### CSS

CSS animations are built upon initialzation in JavaScript. But, you can customize them at your will! These classes are:

```css
/* Cursor */
.typed-cursor {}
.typed-cursor {
}

/* If fade out option is set */
.typed-fade-out {}
.typed-fade-out {
}
```

### Use with ReactJS
Expand All @@ -152,16 +153,20 @@ Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js

Check out the WebComponent: https://github.com/Orlandster/wc-typed-js

Customization
----
## Customization

~~~ javascript
var typed = new Typed(".element", {
```javascript
var typed = new Typed('.element', {
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
strings: [
'These are the default values...',
'You know what you should do?',
'Use your own!',
'Have a great day!'
],
stringsElement: null,

/**
Expand Down Expand Up @@ -240,7 +245,7 @@ var typed = new Typed(".element", {
* @param {Typed} self
*/
onBegin: (self) => {},

/**
* All typing is complete
* @param {Typed} self
Expand Down Expand Up @@ -307,15 +312,13 @@ var typed = new Typed(".element", {
*/
onDestroy: (self) => {}
});
~~~

```

## Contributing

### [View Contribution Guidelines](./.github/CONTRIBUTING.md)

end
---
## end

Thanks for checking this out. If you have any questions, I'll be on [Twitter](http://www.twitter.com/atmattb).

Expand Down
11 changes: 3 additions & 8 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
{
"name": "typed.js",
"version": "2.0.9",
"version": "2.0.11",
"homepage": "https://github.com/mattboldt/typed.js",
"authors": [
"Matt Boldt <[email protected]>"
],
"authors": ["Matt Boldt <[email protected]>"],
"description": "A JavaScript Typing Animation Library",
"main": "lib/typed.js",
"keywords": [
"typed",
"animation"
],
"keywords": ["typed", "animation"],
"ignore": [],
"license": "MIT"
}
2 changes: 1 addition & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ gulp.task('html-docs', () => {
{},
{
name: 'Typed.js Docs',
version: '2.0.9'
version: '2.0.11'
}
)
.pipe(gulp.dest('docs'));
Expand Down
2 changes: 1 addition & 1 deletion index.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Declaration for typed.js
* Typed.js version: v2.0.9
* Typed.js version: v2.0.11
*/

declare module 'typed.js' {
Expand Down
2 changes: 1 addition & 1 deletion lib/typed.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
*
* typed.js - A JavaScript Typing Animation Library
* Author: Matt Boldt <[email protected]>
* Version: v2.0.9
* Version: v2.0.11
* Url: https://github.com/mattboldt/typed.js
* License(s): MIT
*
Expand Down
2 changes: 1 addition & 1 deletion lib/typed.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/typed.min.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "typed.js",
"version": "2.0.9",
"version": "2.0.11",
"homepage": "https://github.com/mattboldt/typed.js",
"repository": "https://github.com/mattboldt/typed.js",
"license": "MIT",
Expand Down

0 comments on commit a7dbc1c

Please sign in to comment.