React
4件の投稿があります
アリババのカスタムフックコードリーディング~useBoolean編~
アリババのカスタムフックをコードリーディング React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います！ カスタムフックとは use から始まりほかのフックを呼び出せる関数です。 自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です！ OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、 わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。 useBoolean フック useBoolean は、 true/false の値を state 管理する hooks です。 前回ご紹介した useToggle が管理してくれた値の型は number | string | boolean でしたが、 useBoolean は boolean のみで、より限定された hooks になります。 API 引数 Property Description Type Default defaultValue…
アリババのカスタムフックコードリーディング~useToggle編~
アリババのカスタムフックをコードリーディング React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います！ カスタムフックとは use から始まりほかのフックを呼び出せる関数です。 自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です！ OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、 わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。 useToggle フック useToggle は状態を2つの値で切り替えるhooksです。 API 引数 Property Description Type Default defaultValue デフォルト値を設定 number | string | boolean | undefined false reverseValue デフォルト値ではない値を設定 number | string | boolean…
コードブロックの指定行をハイライトさせる
つくったもの 技術ブログを書いているときに、サンプルコードの指定行をハイライトしたいことがありました。 サンプルコードのどこを説明しているのか読みやすくしたいと思ったからです！ たとえば .mdx ファイルで line={1,4-6} と行を指定すると、 コードブロック部分は 1 行目と 4~6 行目がハイライトされます。 実装 ```で表示するコンポーネントを用意 マークダウン記法の ` ` ` を使って表示される見た目を、MDXProvider を使って変えたいと思います。 { code: <表示したいコンポーネント /> } を MDXProvider の state である components に渡すことで、 ` ` ` で表示される見た目を変えることが出来ます。 MDXProvider について詳細は以下の記事を参照ください。 自分の場合は、 CodeBlock コンポーネントの中で、 Highlight という色付けされたコード部分を表示するコンポーネントを使っています。 この Highlight…
コードが読みやすくなった！同単語をハイライトする実装
つくったもの hover したらコードブロック内の同じ単語がハイライトされます！ ブログのサンプルコードなんかを読んでて、 ってことがよくあり、ハイライトされるとコードが追いやすくなって便利かなと思って作りました！ Qiita からヒントを得て！（パクリ w） 実装 シンタックスハイライト まず、シンタックスハイライトをするために当ブログでは prism-react-renderer というライブラリを使っています。 prism-react-renderer の詳細は割愛しますが、 Highlight コンポーネントの code という state に表示するコード文字列を渡し、 tokens という配列を操作しています。二次元の配列となっており、各行の中に各単語が入っています。 各単語それぞれに色付けをする必要があるので、各単語を <span> タグで囲って style を適用しています。 ホバーした文字列を state で管理する token.content で単語の文字列を取得できるので、空白を除去して state…