[[423692]]

背景紹介

グループ内の友人から、スライド式CAPTCHAプラグインの実装方法を尋ねられました。これは非常に興味深い質問だったので、自分で調べてみて作成しました。調査の過程で、コンポーネントのデプロイの効率性を考慮しました（npmデプロイとGitHubリポジトリのデプロイは別々に行う必要があり、少し時間がかかります）。幸い、GitHub Actionsは自動デプロイをサポートする継続的インテグレーションソリューションを提供しているので、ワークフローを調査して構成しました。テクノロジースタックは次のとおりです。

• React Hooks + Canvas テクノロジーの選択
• dumi は、コンポーネント開発シナリオ向けに設計されたドキュメント ツールです。
• Fatherjs コンポーネントビルドツール
• GitHub Actions 継続的インテグレーションソリューション

このソリューションは現在、GitHubで完全にオープンソース化されており、GitHubアドレスとドキュメントはこの記事の最後に添付されています。同様のニーズをお持ちの方は、このソリューションの実装方法を参考にしてください。このプロジェクトにご興味をお持ちいただけましたら、いつでも問題を提起したり、貢献したりしていただけます。

プロジェクトの紹介と基本的な使い方

上の画像は基本的なデモです。react-slider-vertifyは現在、ユーザーが設定できるカスタマイズ可能なプロパティを多数提供しています。具体的なプロパティは以下の通りです。

次にインストールと使用方法を紹介します。

1. インストール

#またはyarn add @alex_xu/react-slider-vertify
 npm をインストール @alex_xu/react-slider-vertify

2. 使用

Reactをインポートする  「反応する」 ;
インポート { Vertify }から  '@alex_xu/react-slider-vertify' ; 
 
エクスポートデフォルト（）=> {
 <Verify />を返す
};

より完全な使用例:

コードは次のとおりです。

 Reactをインポートし、{useState}を  「反応する」 ;
インポート { Vertify }から  '@alex_xu/react-slider-vertify' ; 
 
エクスポートデフォルト（）=> {
 const [visible, setVisible] = useState( false );
 const ショー = () => {
 setVisible( true )
 }
 const 隠す = () => {
 setVisible( false )
 }
定数スタイル = {
表示: 'インラインブロック' 、
右余白: '20px '
 marginBottom: '20px' 、
幅: '100px '
パディング: '5px 20px '
色: '#fff '
テキスト配置: 'center '
カーソル: 'ポインタ'
背景: '#1991FA'  
 }
戻る<>
 <div onClick={show} style={style}>表示</div>
 <div onClick={hide} style={style}>非表示</div>
検証する
幅={320}
高さ={160}
可視={可視}
 onSuccess={() => アラート( '成功' )}
 onFail={() => アラート( '失敗' )}
 onRefresh={() => アラート( 'リフレッシュ' )}
 />
 </>
 };

ローカルでテストできます。具体的な技術的実装については、後日別の記事でスライディング検証の実装スキームの詳細を解説します。

この記事はWeChat公式アカウント「フロントエンド開発についての楽しい話」から転載したものです。