recoil

【React x Recoil】DnD state mangemant example ~ WIP ~

【React x Recoil】DnD state mangemant example ~ WIP ~

とりあえずごちゃごちゃ触るだけの記事

随時開発中

 

import * as React from "react";
import { useDropzone } from "react-dropzone";

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil";

import "./styles.css";

const initialState: File[] = [];

const fileState = atom({
  key: "fileState",
  default: initialState
});

const b = selector({
  key: "b",
  get: ({ get }: any) => {
    const a = get(fileState);
    return a;
  }
});

const Child = () => {
  const c = useRecoilValue(b);
  // if(!isRecoilValue(c)){
  //   return <div>not RecoilValue</div>
  // }
  return <div>{c.length !== 0 ? c[0].name : ""}</div>;
};

function MyDropzone() {
  const [file, setFile] = useRecoilState(fileState);

  const onDrop = React.useCallback(
    acceptedFiles => {
      setFile((state: typeof initialState) => {
        return acceptedFiles;
      });
    },
    [setFile]
  );

  const getFilesFromEvent = React.useCallback(async event => {
    let files = [];
    const fileList = event.dataTransfer
      ? event.dataTransfer.files
      : event.target.files;

    for (let i = 0; i < fileList.length; i++) {
      const file = fileList.item(i);
      Object.defineProperty(file, "myProp", {
        value: true
      });

      files.push(file);
    }
    return files;
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple: true,
    getFilesFromEvent
  });
  console.log("filea", file?.name || "");
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
      <Child />
    </div>
  );
}

export default function App() {
  return (
    <RecoilRoot>
      <MyDropzone />
    </RecoilRoot>
  );
}

「武骨日記の」プライバシーポリシーに関して
・プライバシーポリシー
・個人情報取り扱いに関して

・サイトTOP
・私は何者か
・29歳よしもと芸人がWebデザイナー未経験で学校に通い5年後フリーランスのフロントエンドエンジニアになるためにやった9つのこと
・フロント記事
・フロントエンドエンジニア
・フロントエンド記事(タグ)
・TypeScript
・TypeScript練習問題集
・【TypeScript】TypeSript中級者になる為に知っておくと良い108個のこと
・JavaScript練習問題
・styled-componentsの使い方
・SCSS問題集
・GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
・recomposeと仲良くなりたい
・機動戦士FlowType
・初めてReactNativeWebを触ってみて
・Ramda.jsシグネチャの読み方
・環境変数の話
・いちごタルトの作り方
・フロントエンドエンジニア豚汁の作り方

「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
・株式会社TerraceTech

SNS
・しずかなインターネット kenjimorita
・インド旅　instagram
・適当な日常写真　instagram
・シュールさーん　instagram
・シュールさーん LINEスタンプ
・もりたけんじTwitter
・ネタ帳Twitter
・note

・FaceBook -kennji.morita-

※わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。