renderElementTo docs (#71)

* add renderElementTo demo * add new deploy script, update gitignore & package.json * update readme
danreeves · Feb 25, 2018 · 8e89a46 · 8e89a46
1 parent 7ea6587
commit 8e89a46
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,23 +1,133 @@
-# Mac OSX Files
-.DS_Store
-.Trashes
-.Spotlight-V100
+lib
+dist
+example-dist
+.cache
+
+# Created by https://www.gitignore.io/api/osx,node,linux,windows
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### OSX ###
+*.DS_Store
 .AppleDouble
 .LSOverride
 
-# APP
-node_modules
-npm-debug.log
-/dist/
-/lib/
-/example/bundle.js
-/example-dist
-
-# General Files
-.sass-cache
-.hg
-.idea
-.svn
-.cache
-.project
-.tmp
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
+# End of https://www.gitignore.io/api/osx,node,linux,windows
diff --git a/README.md b/README.md
@@ -73,6 +73,8 @@ The tag that is used to render the Tether element, defaults to `div`.
 
 Where in the DOM the Tether element is appended. Passes in any valid selector to `document.querySelector`. Defaults to `document.body`.
 
+Tether requires this element to be `position: static;`, otherwise it will default to `document.body`. See [this example](https://danreeves.github.io/react-tether/renderelementto/) for more information.
+
 #### `Tether Options`:
 
 Any valid [Tether options](http://tether.io/#options).

diff --git a/bin/build-demo b/bin/build-demo
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+
+# Clean the folder dist folder
+echo 'Deleting ./example-dist'
+rm -rf ./example-dist
+
+# Build main demo
+echo 'Building ./example'
+npx parcel build ./example/index.html \
+  --out-dir example-dist \
+  --public-url /react-tether/
+
+# Build the renderelemento demo
+echo 'Building ./tests/examples/renderelementto'
+npx parcel build ./tests/examples/renderelementto/index.html \
+  --out-dir example-dist/renderelementto \
+  --public-url /react-tether/renderelementto/
+
+# Deploy to gh-pages
+echo 'Deploying to gh-pages'
+npx git-directory-deploy \
+  --directory ./example-dist \
+  --branch gh-pages
+
+# Tidy up after
+echo 'Deleting ./example-dist'
+rm -rf ./example-dist
diff --git a/package.json b/package.json
@@ -10,8 +10,7 @@
     "prebuild": "rm -rf dist && mkdir dist",
     "prepublish": "npm run build",
     "demo": "parcel example/index.html",
-    "demo:build": "parcel build example/index.html --out-dir example-dist --public-url /react-tether/",
-    "demo:deploy": "npm run demo:build && git-directory-deploy --directory example-dist --branch gh-pages && rm -rf example-dist",
+    "demo:deploy": "./bin/build-demo",
     "unit": "jest tests/unit",
     "e2e": "testcafe chrome tests/e2e --app 'npm run demo'",
     "e2e:full": "testcafe \"saucelabs:Chrome\",\"saucelabs:Firefox\",\"saucelabs:Safari\",\"saucelabs:MicrosoftEdge\" tests/e2e --app 'npm run demo'",

diff --git a/tests/examples/renderelementto/index.html b/tests/examples/renderelementto/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>renderElementTo example</title>
+    <style>
+      #good-parent .tether-element {
+        background: green;
+      }
+      #bad-parent .tether-element {
+        background: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="bad-parent" style="position: relative"></div>
+    <div id="good-parent" style="position: static"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/tests/examples/renderelementto/index.js b/tests/examples/renderelementto/index.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ReactTether from '../../../lib/react-tether';
+
+const badParent = document.querySelector('#bad-parent');
+const goodParent = document.querySelector('#good-parent');
+
+function App() {
+  return (
+    <div>
+      <h1>renderElementTo example</h1>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+          margin: '4rem',
+        }}
+      >
+        <div>
+          <ReactTether attachment="top center" renderElementTo={badParent}>
+            <span>Target 1</span>
+            <span>Render to #bad-parent</span>
+          </ReactTether>
+        </div>
+        <div>
+          <ReactTether attachment="top center" renderElementTo={goodParent}>
+            <span>Target 1</span>
+            <span>Render to #good-parent</span>
+          </ReactTether>
+        </div>
+      </div>
+      <h2>fixing it with bodyElement</h2>
+      <p>
+        This might not behave in ways you expect so you should know what
+        you&apos;re doing!
+      </p>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+          margin: '4rem',
+        }}
+      >
+        <div>
+          <ReactTether
+            attachment="top center"
+            renderElementTo={badParent}
+            bodyElement={badParent}
+          >
+            <span>Target 1</span>
+            <span>Render to #bad-parent</span>
+          </ReactTether>
+        </div>
+        <div>
+          <ReactTether attachment="top center" renderElementTo={goodParent}>
+            <span>Target 1</span>
+            <span>Render to #good-parent</span>
+          </ReactTether>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+render(<App />, document.querySelector('#app'));