react-typing-animation - npm Package Compare versions

Comparing version 1.0.10 to 1.1.1

example/App.js

@@ -1,5 +0,6 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import Typing, { Backspace, Delay, Reset, Speed } from '../src';
+import styles from './App.css';
+import Typing, { Backspace, Cursor, Delay, Reset, Speed } from '../src';
 
@@ -10,37 +11,112 @@ const TestComponent = ({ children }) => <div>{children}</div>;
 
-const App = () => (
-  <Typing loop startDelay={0} speed={5}>
-    <span>This is a <span>non-test</span></span>
-    <Reset count={1} delay={500} />
-    test
-    <br />
-    this line will get reset
-    <Reset count={1} />
-    <Delay ms={1000} />
-    this whole line will get erased
-    <br />
-    <Backspace delay={500} count={32} />
-    <Delay ms={1000} />
-    <Speed ms={100} />
-    this line
-    <br />
-    and this line will now get erased
-    <Backspace delay={500} count={43} />
-    <span>this is a span</span>
-    <Backspace count={4} />
-    <div>that span should have just gotten removed</div>
-    <span><span>this is a two deep span</span></span>
-    <br />
-    <span>this is a <a href="/">link</a>.</span>
-    <div>and a div</div>
-    <TestComponent>
-      test component backspace
-    </TestComponent>
-    <Backspace count={10} />
-    <Delay ms={2000} />
-    <Reset />
-    Goodbye!
-  </Typing>
-);
+class App extends Component {
+  constructor() {
+    super();
 
+    this.state = {
+      showTitleCursor: true,
+      showFeatures: false,
+    };
+
+    this.showFeatures = ::this.showFeatures;
+  }
+
+  showFeatures() {
+    this.setState({
+      showTitleCursor: false,
+      showFeatures: true,
+    });
+  }
+
+  render() {
+    return (
+      <div className={styles.page}>
+        <Typing
+          className={styles.title}
+          cursor={this.state.showTitleCursor ? <Cursor /> : <noscript />}
+          startDelay={1000}
+          speed={50}
+          onFinishedTyping={this.showFeatures}
+        >
+          <h1>
+            <a href="https://github.com/adamjking3/react-typing-animation">
+              React Typing Animation
+            </a>
+            <Delay ms={500} />
+            <span className={styles.dependencies}>* zero dependencies</span>
+          </h1>
+          <Delay ms={1000} />
+        </Typing>
+        {this.state.showFeatures &&
+          <Typing loop speed={50} className={styles.features}>
+            <Delay ms={500} />
+            <ul>
+              <li>
+                <span className={styles.checkmark}>✅</span> Type text from any valid JSX.
+              </li>
+              <Delay ms={1000} />
+              <li>
+                <span className={styles.styledSpan}>
+                  <span className={styles.checkmark}>✅</span> All styles and
+                  {' '}
+                  <table className={styles.table}>
+                    <tbody>
+                      <tr><td>D</td></tr>
+                      <tr><td>O</td></tr>
+                      <tr><td>M</td></tr>
+                      <tr><td>&nbsp;</td></tr>
+                      <tr><td>S</td></tr>
+                      <tr><td>T</td></tr>
+                      <tr><td>R</td></tr>
+                      <tr><td>U</td></tr>
+                      <tr><td>C</td></tr>
+                      <tr><td>T</td></tr>
+                      <tr><td>U</td></tr>
+                      <tr><td>R</td></tr>
+                      <tr><td>E</td></tr>
+                      <tr><td>S</td></tr>
+                    </tbody>
+                  </table>
+                  {' '}
+                  will be preserved.
+                </span>
+              </li>
+              <Delay ms={1000} />
+              <li>
+                <span className={styles.checkmark}>✅</span> Change the
+                {' '}
+                <Speed ms={250} />
+                {' '}
+                speed
+                {' '}
+                <Speed ms={20} />
+                {' '}
+                of typing anywhere
+                {' '}
+                <Speed ms={40} />
+                {' '}
+                in the tree.
+              </li>
+              <Delay ms={1000} />
+              <li>
+                <span className={styles.checkmark}>✅</span> Backspace with ease.
+                <Backspace count={10} delay={750} />
+                {"couldn't be simpler."}
+              </li>
+              <Delay ms={1000} />
+              <li>
+                <span className={styles.checkmark}>✅</span> Neither could deleting
+                {' '}
+                <span>
+                  a line of text.<Reset count={1} delay={750} />the entire tree.
+                </span>
+                <Reset delay={2000} />
+              </li>
+            </ul>
+          </Typing>}
+      </div>
+    );
+  }
+}
+
 export default App;

example/webpack.config.js

 const path = require('path');
-const AssetsPlugin = require('assets-webpack-plugin');
+// const AssetsPlugin = require('assets-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -12,12 +14,7 @@ const webpack = require('webpack');
   entry: isProduction
-    ? {
-      app: ['./index.js'],
-      vendor: ['react', 'react-dom'],
-    }
+    ? './index.js'
     : ['webpack-hot-middleware/client', 'react-hot-loader/patch', './index.js'],
   output: {
-    filename: '[name]-[hash].js',
-    chunkFilename: '[name]-[chunkhash].js',
-    path: path.resolve(__dirname, './build/public'),
-    publicPath: isProduction ? '/' : 'http://localhost:3000/',
+    filename: 'main.js',
+    path: path.resolve(__dirname, './build'),
   },
@@ -38,14 +35,29 @@ module: {
       },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: isProduction
+          ? ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+                { loader: 'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:4]' },
+                { loader: 'postcss-loader' },
+            ],
+          })
+          : [
+              { loader: 'style-loader' },
+            {
+              loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+            },
+              { loader: 'postcss-loader' },
+          ],
+      },
+      { test: /\.(png|jpg|ico|woff|woff2|ttf|eot|svg)$/, loader: 'file-loader' },
     ],
   },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': isProduction
-        ? JSON.stringify('production')
-        : JSON.stringify('development'),
-      __DEVELOPMENT__: !isProduction,
-    }),
-    new AssetsPlugin({
-      path: path.resolve(__dirname, './build'),
-    }),
+    // new AssetsPlugin({
+    //   path: path.resolve(__dirname, './build'),
+    // }),
+    new CopyWebpackPlugin([{ from: './public', to: './' }]),
     new HtmlWebpackPlugin({
@@ -56,5 +68,10 @@ template: './template.html',
       ? [
-        new webpack.optimize.CommonsChunkPlugin({
-          name: 'vendor',
+        new ExtractTextPlugin({
+          filename: 'styles/main.css',
+          allChunks: true,
+          publicPath: 'styles/',
         }),
+          // new webpack.optimize.CommonsChunkPlugin({
+          //   name: 'vendor',
+          // }),
         new webpack.optimize.UglifyJsPlugin({
@@ -61,0 +78,0 @@ output: {

package.json

 {
   "name": "react-typing-animation",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "main": "./dist/index.js",
   "scripts": {
     "build": "mkdir -p ./dist && babel ./src --out-dir ./dist",
-    "build:example": "npm run clean && NODE_ENV=production webpack --progress --config ./example/webpack.config.js",
+    "build:example": "npm run clean && webpack --progress --config ./example/webpack.config.js",
     "clean": "rimraf ./example/build/* && npm run lint",
-    "lint": "eslint --ignore-path .gitignore .; exit 0",
-    "start": "node ./example/webpack-dev-server.js",
-    "prepublish": "NODE_ENV=production npm run build"
+    "lint": "eslint --ignore-path .gitignore .",
+    "start": "NODE_ENV=development node ./example/webpack-dev-server.js",
+    "prebuild": "npm run lint",
+    "prepublish": "npm run build"
   },
@@ -37,2 +38,3 @@ "babel": {
     "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.1",
     "eslint": "^3.18.0",
@@ -44,7 +46,12 @@ "eslint-config-airbnb": "^14.1.0",
     "express": "^4.15.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
+    "postcss-cssnext": "^2.10.0",
+    "postcss-loader": "^2.0.2",
     "react-dom": "^15.5.4",
     "react-hot-loader": "^3.0.0-beta.6",
     "rimraf": "^2.6.1",
+    "style-loader": "^0.17.0",
     "webpack": "^2.3.0",
@@ -51,0 +58,0 @@ "webpack-dev-middleware": "^1.10.1",

Readme.md

@@ -13,2 +13,4 @@ React-typing-animation
 
+✅ Preserve DOM structure/styling
+
 ✅ Change typing speed anywhere in tree
@@ -39,3 +41,3 @@
 npm install
-npm run start
+npm start
 ```
@@ -70,3 +72,3 @@
 |     className    |   string   |          ''         |    no    |             |
-|      cursor      | React node | *link to Cursor.js* |    no    |             |
+|      cursor      | React node | [Cursor.js](https://github.com/adamjking3/react-typing-animation/blob/master/src/Cursor.js)         |    no    |             |
 |       speed      |   number   |          50         |    no    |             |
@@ -73,0 +75,0 @@ |    startDelay    |   number   |          0          |    no    |             |

src/Typing.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { extractText, replaceTreeText } from './utils';
+import { getRandomInRange, extractText, replaceTreeText } from './utils';
 import Backspace from './Backspace';
@@ -113,5 +113,4 @@ import Reset from './Reset';
       }
-
       this.setState({ cursor, text, toType }, () => {
-        setTimeout(resolve, cursor.speed);
+        setTimeout(resolve, getRandomInRange(cursor.speed * 0.9, cursor.speed * 1.1));
       });
@@ -128,6 +127,11 @@ });
         cursor.lineNum -= 1;
+
+        if (cursor.lineNum < 0) {
+          break;
+        }
+
         cursor.charPos = text[cursor.lineNum].length ? text[cursor.lineNum].length - 1 : 0;
       }
 
-      if (cursor.step === 'char') {
+      if (cursor.step === 'char' && cursor.lineNum >= 0) {
         text[cursor.lineNum] = text[cursor.lineNum].substr(0, text[cursor.lineNum].length - 1);
@@ -150,3 +154,3 @@ } else if (cursor.numToErase > 0) {
       return this.setState({ cursor, text }, () => {
-        setTimeout(resolve, cursor.speed);
+        setTimeout(resolve, getRandomInRange(cursor.speed * 0.9, cursor.speed * 1.1));
       });
@@ -153,0 +157,0 @@ });

src/utils.js

@@ -13,2 +13,4 @@ import React, { Children } from 'react';
 
+export const getRandomInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
 export const extractText = (...args) => {
@@ -15,0 +17,0 @@ const traverse = (node) => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67184

increased by63.96%

Number of lines in readme file

168

increased by1.2%

Worsened metrics

Dev dependency count

28

increased by27.27%

Number of package files

21

decreased by-22.22%

Lines of code

641

decreased by-30.48%

No dependency changes