diff --git a/src/modules/ReactReader/ReactReader.js b/src/modules/ReactReader/ReactReader.js
index 1c524b7..1a912d9 100644
--- a/src/modules/ReactReader/ReactReader.js
+++ b/src/modules/ReactReader/ReactReader.js
@@ -30,13 +30,13 @@ class ReactReader extends PureComponent {
     super(props);
     this.readerRef = React.createRef();
     this.state = {
-      expanedToc: false,
+      expandedToc: false,
       toc: false
     };
   }
   toggleToc = () => {
     this.setState({
-      expanedToc: !this.state.expanedToc
+      expandedToc: !this.state.expandedToc
     });
   };
 
@@ -61,7 +61,7 @@ class ReactReader extends PureComponent {
   };
 
   renderToc() {
-    const { toc, expanedToc } = this.state;
+    const { toc, expandedToc } = this.state;
     const { styles } = this.props;
     return (
       <div>
@@ -77,7 +77,7 @@ class ReactReader extends PureComponent {
             ))}
           </div>
         </div>
-        {expanedToc && (
+        {expandedToc && (
           <div style={styles.tocBackground} onClick={this.toggleToc} />
         )}
       </div>
@@ -88,21 +88,21 @@ class ReactReader extends PureComponent {
     const { locationChanged } = this.props;
     this.setState(
       {
-        expanedToc: false
+        expandedToc: false
       },
       () => locationChanged && locationChanged(loc)
     );
   };
 
   renderTocToggle() {
-    const { expanedToc } = this.state;
+    const { expandedToc } = this.state;
     const { styles } = this.props;
     return (
       <button
         style={Object.assign(
           {},
           styles.tocButton,
-          expanedToc ? styles.tocButtonExpaned : {}
+          expandedToc ? styles.tocButtonExpanded : {}
         )}
         onClick={this.toggleToc}
       >
@@ -126,14 +126,14 @@ class ReactReader extends PureComponent {
       swipeable,
       ...props
     } = this.props;
-    const { toc, expanedToc } = this.state;
+    const { toc, expandedToc } = this.state;
     return (
       <div style={styles.container}>
         <div
           style={Object.assign(
             {},
             styles.readerArea,
-            expanedToc ? styles.containerExpaned : {}
+            expandedToc ? styles.containerExpanded : {}
           )}
         >
           {showToc && this.renderTocToggle()}
diff --git a/src/modules/ReactReader/style.js b/src/modules/ReactReader/style.js
index 2d0a42b..7bab7a1 100644
--- a/src/modules/ReactReader/style.js
+++ b/src/modules/ReactReader/style.js
@@ -11,7 +11,7 @@ export default {
     backgroundColor: "#fff",
     transition: "all .3s ease"
   },
-  containerExpaned: {
+  containerExpanded: {
     transform: "translateX(256px)"
   },
   titleArea: {
@@ -110,7 +110,7 @@ export default {
     borderRadius: 2,
     outline: "none"
   },
-  tocButtonExpaned: {
+  tocButtonExpanded: {
     background: "#f2f2f2"
   },
   tocButtonBar: {
diff --git a/types/index.d.ts b/types/index.d.ts
index e9fd2da..6bfe413 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -41,7 +41,7 @@ declare class ReactReader extends React.Component<ReactReaderProps> {}
 interface ReactReaderStyles {
   container: CSS.Properties;
   readerArea: CSS.Properties;
-  containerExpaned: CSS.Properties;
+  containerExpanded: CSS.Properties;
   titleArea: CSS.Properties;
   reader: CSS.Properties;
   swipeWrapper: CSS.Properties;
@@ -53,7 +53,7 @@ interface ReactReaderStyles {
   tocArea: CSS.Properties;
   tocAreaButton: CSS.Properties;
   tocButton: CSS.Properties;
-  tocButtonExpaned: CSS.Properties;
+  tocButtonExpanded: CSS.Properties;
   tocButtonBar: CSS.Properties;
   tocButtonBarTop: CSS.Properties;
   tocButtonBarBottom: CSS.Properties;