pmnd.rs docsBring your components to life with simple spring animation primitives for React
[Next.js] NextAuth(v3)でGoogle Sign inをつける - Qiita
こちらはv3の実装方法で、v4でかなり変わっています v4についてはこちらの記事をご覧ください 手順 next-authを追加します。 // [...nextauth.js] import NextAuth from 'next-auth' import Providers from 'next-auth/providers' const options = { providers: [ Providers.Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, }), ], // emailのドメイン制限を入れたい場合は以下のcallbacksを入れてください callbacks: { signIn: async (user, account, pro
![[Next.js] NextAuth(v3)でGoogle Sign inをつける - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f75e1671c22e80c8ac3271a4a34e518b7dd18f3e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTmV4dC5qcyU1RCUyME5leHRBdXRoJTI4djMlMjklRTMlODElQTdHb29nbGUlMjBTaWduJTIwaW4lRTMlODIlOTIlRTMlODElQTQlRTMlODElOTElRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQxOTMxMmQ0YWIxODFlY2VjMzIzYmZiZWJhNmZlNjE0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW5hbXVyYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDc5ZTE2ODAxNTE2MmRhYmIwZDIxMjQ5YTFkNzA2MTE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D08b75627196ade71fa791d51827792ec)
【Next.js】みんな next.confing.js にどんなプラグイン入れてる？
Why Next.js 私は、業務でもプライベートでも Next.js を使っています。 Next.js は "Zero Config" をうたっているわけですが、実際業務で使うとなると、なかなか Zero とはいきません。IE11用にトランスパイルが必要になったり、ソースマップのアップロードのために webpack の拡張が必要なるケースにおいては、next.config.js のカスタマイズが必要になります。 そういったカスタマイズをサポートし、設定のストレスから我々エンジニアを開放してくれるパッケージが世の中にはたくさんあります。ということで、自分以外の方々が next.config.js にどのようなプラグインを入れているか気になりました。 まずは、自分がどのようなプラグインを入れているかシェアしたいと思います。 「自分はこんなプラグイン入れていて便利ですよ」みたいなシェアを、Tw
TanStack Query
Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and AngularToss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences. Read the Docs(or check out query.gg – the official React
React Spring
With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler. Why Springs?We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’t have a defined curve or a set duration. As A
Emotion – Introduction
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React. Fr
TanStack Table
Headless UI for building powerful tables & datagridsSupercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles. Get Started Designed for zero designWhat good is a powerful table if that super hip designer you just hired can't work their UI magic on it? TanStack Table is headless by design, which means 100% cont
サードパーティライブラリを使わずに React コンポーネントのユニットテストを書く - 30歳からのプログラミング
React コンポーネントのユニットテストを書くときは、React Testing LibraryやEnzymeなどのサードパーティライブラリを使うことが多いはず。 だがそれらを使わなくても、公式が提供している機能だけでも十分にユニットテストを書くことが出来る。 この記事では、ユニットテストのために公式が提供している機能を紹介していく。 サードパーティライブラリを使わないほうがいい、という話ではない。公式ドキュメントでも、サードパーティライブラリの使用が推奨されている。 だがそれらのライブラリも、内部では公式が提供している機能を使っている。トラブルシューティングや凝ったことをするために、理解しておくに越したことはない。 この記事の内容は React のv16.10.2で動作確認している。 また、テスティングフレームワークには Jest を、アサーションライブラリには power-asser
React Componentでthisがundefinedになる問題の解決策 - 株式会社クラフトマンソフトウェア
最近、ShouldBeeのUIをReact.jsで作り始めています。 Babelを使ってES6のclass構文でReactのComponentを作っているのですが、どうもコールバックのメソッドでthisがundefinedになってしまいます。 例えば、下のJSはボタンのコンポーネントで、クリックしたときに、onClickメソッドが呼ばれます。onClickメソッドの中で、thisを参照していますが、undefinedになります。 import React from "react"; export default class Button extends React.Component { onClick() { console.log(this); // undefined } render() { return ( <button onClick={this.onClick}>Butto
Recoil
Minimal and ReactishRecoil works and thinks like React. Add some to your app and get fast and flexible shared state. Data-Flow GraphDerived data and asynchronous queries are tamed with pure functions and efficient subscriptions. Cross-App ObservationImplement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
How to fetch data in React
Follow on FacebookNewcomers to React often start with applications that don't need data fetching at all. Usually they are confronted with Counter, Todo or TicTacToe applications. That's good, because data fetching adds another layer of complexity to your application while taking the first steps in React. However, at some point you want to request real world data from an own or a third-party API. T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
useSpring | React Spring
ReactアプリをXSERVERに放り込んで動かす【初心者向け】
Frontity - The React Framework for WordPress
REACT - Error: Attempted import error/ App' does not contain a default export (imported as 'App'
useUrlState - ahooks 3.0
GitHub - kentcdodds/react-hooks: Learn React Hooks! 🎣 ⚛
React.js ライブラリ「react-modern-drawer」を使ってナビゲーション・ドロワーを使用する
React Modal v3.1.0
How to get value of textbox in React?