Fix typos

README.md

@@ -49,7 +49,7 @@ Additional installation instructions and documentation for each package can be f
 
 ## Modification
 
-These hooks are designed to be concise, to be easy to understand, and to have zero npm package dependencies. If a hook doesn't quite work for you and requires modificaiton, I encourage you to copy it into your own project and develop it from there.
+These hooks are designed to be concise, to be easy to understand, and to have zero npm package dependencies. If a hook doesn't quite work for you and requires modification, I encourage you to copy it into your own project and develop it from there.
 
 Vendoring a hook is easy, just copy the source file from this repo. For example, you might copy from `packages/sortable/src/index.js` to `assets/js/hooks/sortable.js` in your Phoenix project. Then, change the import path to your local path in your `app.js` file:
 

demo/assets/vendor/Sortable.js

@@ -265,7 +265,7 @@
    * Returns the "bounding client rect" of given element
    * @param  {HTMLElement} el                       The element whose boundingClientRect is wanted
    * @param  {[Boolean]} relativeToContainingBlock  Whether the rect should be relative to the containing block of (including) the container
-   * @param  {[Boolean]} relativeToNonStaticParent  Whether the rect should be relative to the relative parent of (including) the contaienr
+   * @param  {[Boolean]} relativeToNonStaticParent  Whether the rect should be relative to the relative parent of (including) the container
    * @param  {[Boolean]} undoScale                  Whether the container's scale() should be undone
    * @param  {[HTMLElement]} container              The parent the element will be placed in
    * @return {Object}                               The boundingClientRect of el, with specified adjustments

demo/lib/demo_web/live/demo_live/copy_to_clipboard.ex

@@ -74,7 +74,7 @@ defmodule DemoWeb.DemoLive.CopyToClipboard do
       <.header>
         Copy From Contents (Container)
         <:subtitle>
-          Copy plain & html content from the DOM, targeting a conainer inside the hook element.
+          Copy plain & html content from the DOM, targeting a container inside the hook element.
           <.source_link source_url={demo_source_url()} />
         </:subtitle>
       </.header>

packages/audio/README.md

@@ -39,12 +39,12 @@ let liveSocket = new LiveSocket("/live", Socket, { hooks, ... });
 Fields supported in the event `:detail` map for the `phx:play` event:
 
 * `:audio`: The path or URL where the audio file to play is located (required).
-* `:id`: An identifer to give the audio object, in case it should be reused across interactions.
+* `:id`: An identifier to give the audio object, in case it should be reused across interactions.
 * `:restart`: When `true`, starts the audio from the beginning with each play.
 
 Fields supported in the event `:detail` map for the `phx:pause` event:
 
-* `:id`: The identifer of the audio object that should be paused (required).
+* `:id`: The identifier of the audio object that should be paused (required).
 
 ## Options
 

packages/crop-image/README.md

@@ -100,7 +100,7 @@ end
 ## Options
 
 * `activeClass`: Class to be added when an image is loaded and ready to crop. Defaults to `"cropping"`.
-* `minSize`: Mimimum width and height in pixels of the crop area. Defaults to `50`.
+* `minSize`: Minimum width and height in pixels of the crop area. Defaults to `50`.
 * `threshold`: Hitbox size in pixels of the crop area resize handles. Defaults to `10`.
 
 ## Attributes

packages/crop-image/src/index.js

@@ -22,7 +22,7 @@ export default function (options = {}) {
 
       if (!this.containerEl) {
         throw new Error(
-          `@phx-hook/crop-image: Cound not find element #${containerId}`,
+          `@phx-hook/crop-image: Could not find element #${containerId}`,
         );
       }
 

packages/prevent-unsaved-changes/README.md

@@ -37,7 +37,7 @@ This hook does not have to be used with a `<form>` element, however it is the mo
 
 ## Options
 
-* `cancelEvent`: The event to listen for when a cancelation attempt is made. Defaults to `"phx:cancel"`.
+* `cancelEvent`: The event to listen for when a cancellation attempt is made. Defaults to `"phx:cancel"`.
 
 ## Attributes