create package

Author: mavajee

.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "react-nullable-transition-master",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "rm -rf package/dist && tsc -p package/tsconfig.json"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^3.8.3"
+  }
+}

package/.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/dist

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "react-nullable-transition",
+  "version": "1.0.2",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "keywords": [
+    "animation",
+    "transition",
+    "react-transition",
+    "react-transition-group"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.12",
+    "react-transition-group": ">=4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.31",
+    "@types/react-dom": "^16.9.6",
+    "@types/react-transition-group": "^4.2.4"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+type Props = Exclude<Exclude<React.ComponentProps<typeof CSSTransition>, 'in'>, 'appear'>  & {
+    className?: string;
+}
+
+export const TransitionNullable: React.FC<Props> = ({ className, children, ...props }) => {
+    const [childrenCopy, setChildrenCopy] = useState<typeof children>(null);
+    const persistentChildren: typeof children = children || childrenCopy;
+
+    useEffect(() => {
+        if (children) {
+            setChildrenCopy(children);
+        }
+    }, [children]);
+
+    function handleExited(el: HTMLElement) {
+        props.onExited && props.onExited(el);
+
+        setChildrenCopy(null);
+    }
+
+    if (persistentChildren) {
+        return (
+            <CSSTransition {...props} appear in={Boolean(children)} onExited={handleExited}>
+                {persistentChildren}
+            </CSSTransition>
+        );
+    }
+
+    return null;
+};

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "react",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "lib": [
+      "dom",
+      "es2017",
+    ],
+    "typeRoots": [ "./node_modules/@types"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/yarn.lock

@@ -0,0 +1,35 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react-dom@^16.9.6":
+  version "16.9.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.6.tgz#9e7f83d90566521cc2083be2277c6712dcaf754c"
+  integrity sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-transition-group@^4.2.4":
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
+  integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.9.31":
+  version "16.9.31"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.31.tgz#6a543529766c8934ec8a89667376c2e73e9e2636"
+  integrity sha512-NpYJpNMWScFXtx3A2BJMeew2G3+9SEslVWMdxNJ6DLvxIuxWjY1bizK9q5Y1ujhln31vtjmhjOAYDr9Xx3k9FQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+csstype@^2.2.0:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==