react-use - streamich.github.io streamich/react-use - github.com
react-use の実装から学ぶ custom hooks
import { useState } from 'react'
y3n yano3nora
yano3nora
/ react-use.md
Last active
March 27, 2024 07:38
[js: react-use] Custom react hooks library. #js #react
yano3nora
/ chakra-ui.md
Last active
March 26, 2024 08:20
[js: Chakra UI] TypeScript based component library for React. #js
- react 向けの ui component library で ts ベース
- tailwind css っぽい utility first な設計だが default component も結構ある
- Emotion 依存で CSS のカスタマイズは CSS-in-JS でやるぽい
$ npm i react-plotly.js plotly.js
$ npm i -D @types/react-plotly.jsimport React from 'react'- svg ファイルを react component として使えるやつ
- afterInjection から描画後の node 操作が可能
- src の svg ファイルから width, height を読み取って viewBox 指定までやってくれるので、中に svg やら html (foreign object) やら nest してやれば resize 時に全体がよき感じに縮尺される
$ npm i react-svg- 開発時には esbuild を、本番ビルドには rollup を使うバンドルツール
- react, vue など ui library や typescript への対応もばっちり
- とにかく早くて使いやすいとのこと
- 次世代 front ツールとして snowpack と比較されるが、今んとこシェアぶっちぎり
nextjs つかうなら内包されている webpack で十分だし、それ以外の node project で使うかはまだちょっとわからないけど、単純な SPA 作成なら parcel 代替で使えそうに見える。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "default", | |
| "settings": "{\"settings\":\"{\\n \\\"[python]\\\": {\\n \\\"editor.defaultFormatter\\\": \\\"ms-python.python\\\"\\n },\\n \\\"code-runner.clearPreviousOutput\\\": false,\\n \\\"code-runner.executorMap\\\": {\\n \\\"csharp\\\": \\\"scriptcs -script\\\"\\n },\\n \\\"code-runner.runInTerminal\\\": true,\\n \\\"code-runner.showRunIconInEditorTitleMenu\\\": false,\\n \\\"comments.openView\\\": \\\"never\\\",\\n \\\"cSpell.enableFiletypes\\\": [\\n \\\"prisma\\\"\\n ],\\n \\\"diffEditor.ignoreTrimWhitespace\\\": false,\\n \\\"editor.acceptSuggestionOnCommitCharacter\\\": false,\\n \\\"editor.acceptSuggestionOnEnter\\\": \\\"off\\\",\\n \\\"editor.accessibilitySupport\\\": \\\"off\\\",\\n \\\"editor.bracketPairColorization.enabled\\\": false,\\n \\\"editor.definitionLinkOpensInPeek\\\": true,\\n \\\"editor.dragAndDrop\\\": false,\\n \\\"editor.fastScrollSensitivity\\\": 0,\\n \\\"editor.foldingStrategy\\\": \\\"indentation\\\",\\n \\\"editor.fontSize\\\": 12,\\ |
- node.js 製の Git Hooks を使いやすくするやつ
.huskyrcを設置 +npm iで本体 install すれば動作するpackage.jsonの lint とか hook してexit 1ならそのまま落ちてくれる
なんか公式 doc の案内と web 上の記事が全然違うこと言ってるので、version 古いやつだと結構使い方違ったぽい。
nodenv, rbenv, pyenv など各言語ランタイムのバージョン管理ツール ( いわゆる *env 系 ) を一元管理するためのツール。言語ごとに *env をインストールしてシェル設定して ... みたいなのをコイツだけで管理できる。いわゆるゴッド。
以前は goenv や nenv など、あんまり開発が活発じゃない env 系リポジトリを標準にしていたので採用していない人が多い印象だったが、最近になって改善されユーザーも増えてきているっぽい。
やってることは各 env のラッパーなので、実際に利用する rbenv なんかのコマンドはちゃんとそれぞれの公式ドキュメントみようね。あと既に rbenv など入れてる場合、面倒だけど一旦削除してから導入するのがよさそう。
$ npm i qrcode.reactimport { QRCodeSVG } from 'qrcode.react'
- react でそのまま使える video, audio 再生プレイヤー
- youtube などの映像サービスに広く対応
- 普通に cdn に置いてあるファイルを読んだりとかも ok
$ npm i react-player