React Hook Form + yup によるフォーム実装あれこれ - vivit engineering blog
はじめに vivit株式会社でフロントエンドエンジニアをしている氏家です。 私は現在、アウトドア用品の中古品買取と販売を行うhinataリユースの内製システムの開発に携わっています。 www.hinatareuse.jp システムはNext.js + TypeScriptにUIコンポーネントライブラリのAnt Designを導入して開発されています。 このシステムに買取商品の情報を入力するフォームを実装する際、フォーム周りのステートやロジックをAnt Designに持たせたくないという意向があったので、React Hook Formを導入しフォームのステート管理やバリデーションを任せることにしました。 このReact Hook Form、yupを使用したスキーマバリデーションをサポートしていたり、UIコンポーネントライブラリが提供する制御されたコンポーネントにも対応していたりと、使い勝手が
Next.jsにstyled-componentsを導入する - hiro08gh
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。 自分もstyled-componentsを利用する一人ですが、Next.jsで導入する場合少し癖があったので備忘録として残しておきます。 ドキュメント styled-components: Documentation 前提 TypeScriptベースで話を進めていきます。 Next.jsにTypeScriptを導入する記事はこちら code-log.hatenablog.com styled-componentsのインストール まずは、ライブラリをインストールします。 $ yarn add styled-componentsそして、TypeScrip
Next.jsにstyled-componentsを導入 - Qiita
この記事は下記のことについて書きます。 Next.jsにstyled-componentsの導入方法 Next.jsのbodyにglobalなcssの設定方法 参考にした記事はこちらになります。 styled-componentsを使ったCSS設計 これからのReactのスタイリングにはStyled Componentsが最高かもしれない Global styles and layouts styled-componentについて 「これからのReactのスタイリングにはStyled Componentsが最高かもしれない」に書かれているとおりになります。 cssの定義を、class属性を利用してカプセル化して再利用しやすいようにするための仕組みです。StyledComponentsもこの流れではありますが、外部cssファイルではなくjsxファイルに定義するためそのファイル内でReactコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to integrate Mapbox GL JS in your Next.js Project without react-map-gl or a React wrapper library
Making Next.js and Mapbox GL JS get along
GitHub - leerob/next-mapbox-demo: 🌎 Creating a non-SSR map component inside a Next.js project.