
```ts
import { useEffect } from "react";

const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: (event: MouseEvent) => void  
) => {
  useEffect(
    () => {
      
      const listener = (event: MouseEvent) => {
        if (!ref.current || ref.current.contains(event.target as Node)) {
          return;
        }

        handler(event);
      };

      document.addEventListener("click", listener);
      return () => {
        document.removeEventListener("click", listener);
      };
    },
    [ref, handler]
  );
};

export default useClickOutside;
```


A simple hook to detect click outside an element

Detect click outside a React Component with Hook


```ts
import {useState} from "react";

const useWindowSize = () => {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const listener = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', listener);

    return () => window.removeEventListener('resize', listener);
  }, []);

  return size;
};
```


Use a custom hook to get the current Window size in React


In this post, I'll show you how to set up a new `express` project with `typescript`

## Create a new project

Let's get started by making a new folder and generate a `package.json` file

```cmd
mkdir express-typescript
cd express-typescript
npm init -y
```

## Set up `typescript`

Add `typescript` as a project's dev dependency and generate a new `tsconfig.json`

```cmd
npm install --save-dev typescript
npx tsc --init
```

In the `tsconfig.json` file, change the two following options under `compilerOptions`

```json
"compilerOptions": {
  "rootDir": "./src",
  "outDir": "./dist"
}
```

Now, `src` will be where we write our source codes, and all the compiled files will go to `dist`

## Create a server with `express`

Now let's add `express` and some type definition packages to our project

```cmd
npm install express
npm install --save-dev @types/express @types/node
```

create `index.ts` in `src` file with the following code

```ts
import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello from express');
});

app.listen(4000, () => {
  console.log('Listening on port 4000');
});
```

## Run our project

Install `nodemon` and `ts-node` so we can watch and run `typescript` files easier

```cmd
npm install --save-dev nodemon ts-node
```

Let's create some scripts in our `package.json`

```json
"scripts": {
  "dev": "nodemon src/index.ts",
  "build": "tsc -p .",
  "start": "node dist/index.js"
}
```

Now, run `npm run dev` and everything is working fine.  
If you want to build the project, just run `npm run build` and then run `npm run start` to start


Use Typescript in your express project to make it scalable and maintainable

Recently Published

Categories