👋 こんにちは、世界！

Svelteのスーパーパワーの一つは、それが“アクション”を使用して非svelteのJavaScriptライブラリと統合することです簡単にフレーク方法です.
アクションを使用すると、カスタムのsvelteコンポーネントを書き込む必要がなく再利用可能な方法で要素にすべての種類の興味深い動作をアタッチできます.彼らはかなりきちんとしている!🤓
ポストでは、プレーンJavaScriptツールヒントライブラリを使用する方法を学びますTippy.js カスタムsvelteアクションを使用して、Svelteプロジェクトで.
私は、あなたが非常にこれがどれくらい単純かについて感動されると思います.
レッツゴー!👇
せっかち?チェックアウトSvelte REPL here

ボタン

ボタンを持っているとしましょうtitle ツールヒントを追加する属性

<button title="hello world">Hover me</button>

今、Aを作るよりもむしろ<Tooltip> コンポーネントをラップする必要があるコンポーネントは、アクションを活用しよう!

行動

我々の行動を書くために、我々は素晴らしいJavaScriptツールチップライブラリTippy.js 独自のカスタムツールヒントライブラリを書くのではなく、これを行う必要はありません.
このアクションは非常に簡単で、ツールヒントで何を表示するかを決定するだけで、Tippyインスタンスを作成し、要素のnode , いくつかの小道具を渡して、次にDOMからアンマウントされたときに掃除をする

// tooltip.js
module.exports = function tooltip(node, params = {}) {
  // Determine the title to show. We want to prefer
  //    the custom content passed in first, then the
  // HTML title attribute then the aria-label
  // in that order.
  const custom = params.content;
  const title = node.title;
  const label = node.getAttribute("aria-label");
  const content = custom || title || label;

  // Let's make sure the "aria-label" attribute
  // is set so our element is accessible:
  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
  if (!label) node.setAttribute("aria-label", content);

  // Clear out the HTML title attribute since
  // we don't want the default behavior of it
  // showing up on hover.
  node.title = "";

  // Support any of the Tippy props by forwarding all "params":
  // https://atomiks.github.io/tippyjs/v6/all-props/
  const tip = tippy(node, { content, ...params });

  return {
    // If the props change, let's update the Tippy instance:
    update: (newParams) => tip.setProps({ content, ...newParams }),

    // Clean up the Tippy instance on unmount:
    destroy: () => tip.destroy(),
  };
};

私はあなたについて知りません、しかし、私はこれがかなりひっくり返っていると思います!🤯 🤩
ここを歩きましょう.
まず、ツールチップに表示するテキストを決定します.この場合、最初にカスタムコンテンツを好みますtitle それからaria-label それで、我々は値について知的で、正気のデフォルトを考慮に入れます.そして、aria-label 属性が設定されていない(自動アクセシビリティの勝利)!🎉). また、クリアアウトtitle フィールドので、ホバーに表示されるタイトルを持つデフォルトのブラウザの動作を表示しません.
それから、我々は電話しますtippy(...) を返します.現在node 値は、それが要素に付けられるとき、あなたの行動が得られるものです.番目の引数は、アクションに渡すパラメータです.この場合、私たちは、私たちが直接Tippyに望むどんなparamsでも渡すのを許すためにparamsを使用しています.
Tippyインスタンスを変更した場合、Tippy小道具を更新するために使用しますupdate そして、コンポーネントがアンマウントされている場合には、Tippyインスタンスを安全に削除するために、destroy .
それはすべてそこにある!
さあ、我々のSpiffy Newを使いましょうtooltip アクション!💃

一緒に置く

アクションをインポート

最初に、私たちはtooltip Svelteコンポーネントの動作:

<!--
App.svelte or whatever other component you want 
to use the tooltip in!
-->
<script>
  import tooltip from "./tooltip";
</script>

ティッピーのCSS

今、我々はTippy JSとCSSのコードをインポートする必要があります.この例はSvelte RPLのために構築されたので、私たちはこれのためにCDNを使用していますが、代わりにあなたのビルドプロセスでこれらの資産をバンドルすることを望むでしょうTippy docs .

<svelte:head>
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light.css" />
  <link
    rel="stylesheet"
    href="https://unpkg.com/tippy.js@6/themes/light-border.css"
  />
</svelte:head>

あなたのアクションを使用してください！

我々の新しい使用tooltip アクションは非常に簡単です、我々がする必要があるすべてはuse: 任意の要素にディレクティブを設定します.

<button use:tooltip title="hello world">Hover Me!</button>

かなりクールええ!

我々はまた、必要に応じてtippyにカスタム小道具を渡すことができます

<!-- using aria-label: -->
<button use:tooltip aria-label="Aria label!">
  With "aria-label"
</button>

<!-- custom tooltip content: -->
<button use:tooltip={{ content: "Hi there!" }}>
  Custom tooltip
</button>

<!-- setting a tooltip theme: -->
<button use:tooltip={{ theme: "light" }} title="Light theme!">
  Light theme
</button>

🛰 更なる

今、これは基本的な例ですが、これを取ることができますし、アプリケーションのニーズに合わせて拡張するには、例えば、デフォルトのテーマ、アニメーション、および必要に応じて位置を設定する必要がありますあなたのアプリケーションを通してこのコードを繰り返す必要はありません.
実際、このコードはとても簡単だと思いますnpm パッケージですが、もしそうならば🙏.
また、あなたのsvelteアプリのすべての種類の非フレームワーク固有のライブラリにアクションを使用することもできます.あなたが何かを共有する場合は、他のコメントを下記のコメントを聞かせて来る!

🎬 フィン

Svelteのこの機能は信じられないほど説得力があるので、JavaScriptライブラリの広い世界と統合することは些細なことになります.
反応を使用して6年以上、私は頻繁にDOMと直接動作するJSライブラリの広大な宇宙を活用していないことを発見したが、それは、ある意味では、反世界の反パターンです.そのうえ、反応のそのようなライブラリを統合しようとすることは、しばしばより難しくて壊れやすいです.
Svelteがここで私たちに与えるのは、私たちの多く(少なくとも反応世界で)が無視する傾向がある信じられないほどのJSライブラリの生態系全体を活用する力です.あなたが望むならば、あなたはjQueryライブラリを使うことさえできます🙀!
あなたがsvelteアプリを書いているならば、彼らがあなたが多くのケースできれいで、柔軟で、プラットホームの不可知性の特徴を書くことができるので、私はあなたが行動を利用するのを奨励します.
そして、もしあなたがまだサベルテアプリを書いていない場合は、プールでジャンプを考慮し、水は暖かいです!🏖 🏊 🍻
読書ありがとう!このポストを与える❤️, 🦄 or 🔖 後でブックマークする.💕
他のヒント、アイデア、フィードバックや修正がありますか?コメントで知らせてください!🙋‍♂️
dev . to ()、twitter、および/またはgetthubの上で私についていくのを忘れないでください.danawoodman )!
写真でJoshua Aragon on Unsplash