反応親切:反応のためのカスタマイズ可能なスクリーンガイド

私はちょうど反応の簡単な画面ガイドコンポーネントを公開しました.どうぞご覧下さい.
👉 react-kindness Demo
👉 react-kindness README
開発の動機はSVGマスクとpointer-events: none 簡単にスクリーンガイドを実装することができます.他のライブラリはしばしば4div sは集中した要素のまわりでsです.そして、それはそれがオーバーレイで円点を描くことができないと決定します.もちろんSVGマスクが使えます.
別の実装では、ターゲット要素をposition: relative; z-index: 9999999 !important; ユーザーに“タッチ”要素を許可し、オーバーレイで他の要素を非表示にするdiv , 一見したところ、クールな解決策のようです.しかし、スクリーンガイドの間にユーザーの相互作用をブロックしなければならないのでしょうか.むしろ、ユーザーはアンカーリンクをクリックしたり、ページ上の最近の通知を確認するためにベルのアイコンをクリックしたい場合がありますか?
反応親切は、ユーザーの相互作用をブロックしないシンプルなUIガイドです.ちょうどオーバーレイ、“パネル”と“次の”ボタンを含むメッセージパネルでスポットを示しています.
ここでは、使用の最小の例です.

import {KindnessPanel, Kindness} from 'react-kindness';
import 'react-kindness/dist/index.css';

// ...
    <KindnessPanel
        enabled={this.state.show}
        onExit={() => this.setState({show: false})} />

あなたはおそらくガイドをオン/オフしたいので、あなたのコンポーネント内の状態を保つthis.state.show 上記.それを無効にすることを忘れないでくださいonExit イベントフック.

<Kindness>
    <input type="text" {...} />
</Kindness>

<Kindness message="Click here to submit your post!">
    <button type="submit">
        Submit
    </button>
</Kindness>

次に、要素をラップする<Kindness /> どのスポットが追跡されます.その他の属性title and order もあります.どうぞREADME ドキュメントのために.
ユーザーの相互作用のブロックについて、あなたがそれのように感じるならば、あなたは戻ることができますfalse インonClickOutside . 反応親切は、あなたのためにユーザー・アクションを無効にする気になります.

    <KindnessPanel
        // ...
        onClickOutside={() => false} />

そして次に、これは反応コンポーネント開発の「コンポーネントとしての機能」パターンを試してみたかったことです.それを使用して、反応親切のパネルの内容は完全にカスタマイズ可能です.
内部では、パネルの内容は<KindnessPanelContent /> これはメッセージとボタンをレンダリングします.既定のコンテンツを使用する代わりに、パネル内の任意の要素をレンダリングできます.

import Button from '@material-ui/core/Button';

// ...

<KindnessPanel enabled={true}>
    {
        ({message, totalSize, currentIndex, goNext, goPrev}) => (
            <div>
                <h3>{message}</h3>
                <h4>{`You are seeing ${currentIndex + 1} of ${totalSize} in the guide.`}</h4>
                <Button action={goPrev}>Go previous</Button>
                <Button action={goNext}>Go next</Button>
            </div>
        )
    }
</KindnessPanel>

また、パネルとスポットのスタイルを希望するように変更することができます.
最後に、プロジェクトに感謝しますPopper.js 親切に反応するものは大きく依存する.DOMポジショニングのその機能性は、私が簡単にコードを読んで、たどることができて、機能を利用することができるように、包括的で、洗練されています.私のような外部開発者のためのJS輸出.段階的にステップを変更するアーキテクチャmodifiers ちょうどクールで拡張可能です.あなたがDOM位置決めの問題に直面するならばPopper.js 👍