react-i18nextで文中の文字を動的にリンクさせる

文章の中で特定の文字を動的にリンクを変えたかった。以下のような感じで対応できた。対応例 ja/translation.json { "link" : "こちらの<link_label>リンク</link_label>を参照ください。" } en/translation.json { "link" : "Please refer to this <link_label>link</link_label>.” } const {t} = useTransla…

2024-03-25

tailwindで子孫要素にスタイルを当てる

&_で子孫に要素を当てられる。実際antdとか使っててスタイルが崩れた時に応急処置するときとかに使った tabler/reacr-iconと組み合わせるとよくズレる例 <FloatButton className="[&_[class=ant-float-btn-icon]]:grid [&_[class=ant-float-btn-icon]]:place-content-center" icon={<IconFile />} ></floatbutton>

2024-02-05

動かないアーカイブ系のライブラリに絶望中。。神「コマンドを直接叩けばいいんだよ！」←衝撃

普段フロント側が多くてバックエンドならではの発想に衝撃を覚えました。衝撃の一言バックエンド実装中の私は、ある拡張子を解凍する必要がありました。しかし、有用そうなアーカイブライブラリは一種類のみ、しかもバグで動かないしメンテもされていない…

#ワークアラウンド

2024-01-26

react-i18nextで一部だけ文字を装飾したい

やりたいこと用意したTranslationの一部をboldにしたかった。 useTranslationのtだけじゃ無理だった。答え <Trans>を利用して、react-i18nextで一部許されているタグで装飾する。 translation.json "hey": "Hey <strong>{{name}}</strong> !" example.tsx const {t} = useTranslati</trans>…

2024-01-21

MSWのハンドラーの取得を取り回ししやすくする

ハンドラを設定する際にステータスコードやエンドポイントってあんまり変えないし、変えたとしてもStory毎ですよね。毎回設定するのも億劫だったので、あんまり労力かけずに取り回ししやすくするようにしています。こんな感じ type StatusParams = Paramet…

2023-12-11

Tailwind CSSのコンテナクエリにMax-width来てくれ〜！

これです。 PRがあったがマージされていない涙（投稿日現在） github.com これがないと例えばこれがめんどい例えば、テーブルっぽいレイアウトがあったとしてその幅に応じてカラム数を減らすみたいなのやりたい時、現状こう書くことになる <div className="@container/parent"> <div className="hidden @[1024px]/parent:block">消えるよ</div> </div> 早く…

2023-11-28

Tailwind CSS で overflow-wrap:anywhere を指定したい

探してもない！ overflow-wrap:anywhere を指定しようと探したけど、、ない、、どうやらサポートされていない模様（投稿日現在） https://tailwindcss.com/docs/word-break これでOKだった <div className="[overflow-wrap:anywhere]">...</div> これでとりあえずはことなきを得た参考 https://github.com/t…

2023-07-18

DockerでAmazon Linux2にnode16を入れる

Amazon Linux 2 には現状16まで*1しか入れられないので決め打ちで入れる例 FROM amazonlinux:2 RUN curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - \ && yum install -y nodejs *1:https://docs.aws.amazon.com/ja_jp/sdk-for-javascr…

2023-07-18

DockerでAmazon Linux2にEPELリポジトリ追加

このコマンドを追加すれば良い sudo yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 例 FROM amazonlinux:2 RUN yum update -y \ && yum clean all \ && sudo yum -y install https://dl.fedoraproject.org/pub/ep…