Skip to content

Commit

Permalink
docs: use codesandbox for typescript examples
Browse files Browse the repository at this point in the history
  • Loading branch information
darthtrevino committed Mar 27, 2019
1 parent f94a642 commit 6356a2f
Show file tree
Hide file tree
Showing 17 changed files with 17 additions and 17 deletions.
Expand Up @@ -4,7 +4,7 @@ title: 'Tutorial'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/00-chessboard/)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/00-chessboard/)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/00-chessboard/)

This is a sample app you'll build as you work through the [tutorial](/docs/tutorial)

Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Drop Effects'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/05-customize/drop-effects)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/05-customize/drop-effects)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/05-customize/drop-effects)

Some browsers let you specify the “drop effects” for the draggable
items. In the compatible browsers, you will see a “copy” icon when you
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Handles and Previews'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/05-customize/handles-and-previews)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/05-customize/handles-and-previews)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/05-customize/handles-and-previews)

React DnD lets you choose the draggable node, as well as the drag
preview node in your component's `render` function.
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Custom Drag Layer'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/02-drag-around/custom-drag-layer)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/02-drag-around/custom-drag-layer)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/02-drag-around/custom-drag-layer)

The browser APIs provide no way to change the drag preview or its
behavior once drag has started. Libraries such as jQuery UI implement
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Naive'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/02-drag-around/naive)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/02-drag-around/naive)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/02-drag-around/naive)

This example naively relies on browser drag and drop implementation
without much custom logic.
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Copy or Move'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/copy-or-move)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/01-dustbin/copy-or-move)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/01-dustbin/copy-or-move)

This example demonstrates drop targets that can accept copy and move
drop effects, which users can switch between by holding down or
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/markdown/examples/dustbin/iframe.md
Expand Up @@ -4,7 +4,7 @@ title: 'iframe'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/single-target-in-iframe)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/01-dustbin/single-target-in-iframe)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/01-dustbin/single-target-in-iframe)

This is the same simple example, but nested in an iframe.

Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Multiple Targets'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/multiple-targets)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/01-dustbin/multiple-targets)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/01-dustbin/multiple-targets)

This is a slightly more interesting example.
It demonstrates how a single drop target may accept multiple types,
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Single Target'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/single-target)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/01-dustbin/single-target)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/01-dustbin/single-target)

This is the simplest example of drag and drop.

Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Stress Test'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/stress-test)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/01-dustbin/stress-test)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/01-dustbin/stress-test)

This example is similar to the previous one, but props of both the
drag sources and the drop targets change every second. It demonstrates
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Drag Sources'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/03-nesting/drag-sources)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/03-nesting/drag-sources)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/03-nesting/drag-sources)

You can nest the drag sources in one another. If a nested drag source
returns `false` from `canDrag`, its parent will
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Drop Targets'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/03-nesting/drop-targets)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/03-nesting/drop-targets)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/03-nesting/drop-targets)

Drop targets can, too, be nested in one another. Unlike the drag
sources, several drop targets may react to the same item being
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Drag Source Rerender'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/06-other/drag-source-rerender)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/06-other/drag-source-rerender)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/06-other/drag-source-rerender)

Regression example using a drop target that's connected as a child

Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Native Files'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/06-other/native-files)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/06-other/native-files)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/06-other/native-files)

Example demonstrating drag and drop of native files.

Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Cancel on Drop Outside'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/04-sortable/cancel-on-drop-outside)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/04-sortable/cancel-on-drop-outside)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/04-sortable/cancel-on-drop-outside)

Because you write the logic instead of using the ready-made components,
you can tweak the behavior to the one your app needs.
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Simple'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/04-sortable/Simple)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/04-sortable/Simple)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/04-sortable/Simple)

It is easy to implement a sortable interface with React DnD. Just make
the same component both a drag source and a drop target, and reorder
Expand Down
Expand Up @@ -4,7 +4,7 @@ title: 'Stress Test'
---

[JavaScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/04-sortable/stress-test)
[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/examples/src/04-sortable/stress-test)
[TypeScript](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_ts/04-sortable/stress-test)

How many items can React DnD handle at the same time? There are a
thousand items in this list. With some optimizations like updating the
Expand Down

0 comments on commit 6356a2f

Please sign in to comment.