Divz - Scroll, Swipe & Zoom on the 3D Z-AxisDivz is a free open-source React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis
React Hook Formハマりどころとベストプラクティス
初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
React Chartライブラリを比較してみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 最近、ReactのChartライブラリについて調べる機会があったので、その時の共有です。 今回は、以下の４つを使用してみました。 Recharts react-chartjs-2 nivo victory Recharts https://github.com/recharts/recharts 特徴 React コンポーネントとして使え、素の SVG の描画をサポート 画面に表示したいコンポーネントを宣言するだけで描画可能 Next.jsでは、動的インポートを使用(アラートのみのため、使用しなくても使えることは使えます) TypeScript組み込み チャートAPI ＊ 棒グラフ、円グラフなどの基本的なチャートは省きます FunnelChart SankeyChart RadarChart Treemap デ
Game of Codes project
"Over the years, observing the world of technology, I could not help but feel that it is a great material for creating a separate universe that could become the basis for an extremely interesting story. Using real data, such as the number of NPM downloads, stars on github or website traffic, I tried to measure the "power" of a given technology and visualize it with quasi-historical maps."
Game of Codes – プログラミングツールやライブラリの勢力を表した架空の世界地図
Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。 フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。 React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。 各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。 What if #javascript libraries were countries? Will the #React Empire dominate the world? Will the Kingdom of #Vue stop the invasion? Will Kingdom of
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 Chromeだとiframeの埋め込み越しにセルのドラッグができないみたいなので直接CodeSandboxに行くか、別のブラウザでアクセスしてください😿 (Drag A
React向けライブラリを解説～フォームの状態管理を助けるFormikとは？
昨今、WebアプリケーションのフロントエンドをReactで作成する機会は少しずつ増えてきました。Reactそのものは状態管理とUIを効率的にひもづけるためのフレームワークですが、その周辺には、複雑な状態管理を効率化するライブラリやきれいなUIを提供してくれるライブラリなど、魅力的なライブラリが数多く存在しています。本連載では、そんなライブラリを1つずつ、実例を添えて解説することで、現場で課題に出会った際に適切なライブラリを選択できる力を養います。第1回となる今回は、入力フォームについて扱います。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.7 Node.js 14.14.0／npm 6.14.8 React 17.0.
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
【ReactJS】明日から使いたいライブラリ8選！
ReactJS の案件に携わってから1年近く経ったので 今までに出会ったライブラリの中で便利だったものを自作の DEMO とコード付きで紹介していきます。 CSSは頑張りません。ださくてもしょうがない。 infoこの記事のデモとコードは2021/09のブログ引っ越しに合わせて codesandbox に変更しました。 それに合わせて一部のコードを書き換えたり、他のサンプルに(forkして)置き換えたりしてます。バージョンは 修正時点の最新だったり、サンプルが使っているバージョンだったりでバラバラ なのであくまで参考程度に御覧ください。詳しいオプションは公式ドキュメントを参照してください。間違っていたり、もっといいやり方がある場合は優しめに教えてください。いろいろ動作検証しながらやったので不要なコードが多少残っているかもしれませんが気にしないでください。react-notification-
Free Bootstrap 5 Material Design Admin Product description The most complex and innovative Dashboard Made by Creative Tim. Check our latest Freebie Bootstrap 5 Dashboard with a fresh, new design inspired by Google's Material Design 2. Designed for those who like bold elements and beautiful websites, Material Dashboard 2 is ready to help you create stunning websites and web apps. We created many ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tremorlabs/tremor: React components to build charts and dashboards
Lexical
現場で役立つ！ React向けライブラリ詳説一覧
Radix UI
React-pdf