Criando meu primeiro Widget para o Notion
Tags: github, react, notion, webdev
Published: 2024-01-23 15:54:57

---
title: Criando meu primeiro Widget para o Notion
published: true
date: 2024-01-03 18:44:04 UTC
tags: github,react,notion,webdevelopment
canonical_url: https://marcellecode.medium.com/criando-meu-primeiro-widget-para-notion-f7f77f64ee48
---

![](https://cdn-images-1.medium.com/max/1024/0*UoqEbYmrPOVgn8Tr)
_Photo by Sigmund on Unsplash_

Notion é uma ferramenta que faz parte do meu dia a dia, toda a minha vida é organizada nele. E algo que sempre me chamou a atenção foram os widgets que podemos adicionar nele. E recentemente eu descobri uma forma de criar os meus e é isso que nós vamos fazer nesse artigo.

#### Pré-requisitos

- Ter o node.js instalado
- Ter uma conta no github

#### Setup do projeto

Criar um projeto react

```
npx create-react-app notion-clock-widget
```

Instalar a bibioteca react-gh-pages (ela irá agilizar o processo de deploy no Github pages)

```
npm install gh-pages --save-dev
```

#### Criando o componente de relógio

Vamos começar criando a estrutura básica de um function component

```
//relogio.js

import React from 'react';
function Relogio() 
  return (
    <div>
      <h2>relogio</h2>
    </div>
  );
}

export default Relogio;
```

E como estamos criando um relógio eu preciso que ele sempre me mostre o horário atualizado. Para isso vamos utilizar dois hooks do react o useState (para armazenar a hora) e o useEffect (para manter a atualização do estado mesmo depois da página ser renderizada).

```
import React, { useState, useEffect } from 'react';

function Relogio() {
  const [horarioAtual, setHorarioAtual] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => updateTime(), 1000);

    return function cleanup() {
      clearInterval(timerID);   
    };
  }, []);

  function updateTime() {
    setHorarioAtual(new Date());
  }

  return (
    <div className='clock-container'>
      <h2>{horarioAtual.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Relogio;
```

Como um relógio tem atualizações a cada 1s nós usamos a função setInterval para chamar a função que irá realizar a atualização do estado do relógio.

#### Fazendo o deploy no Github Pages

Com o código criado vamos fazer a configuração para o deploy. No arquivo package.json logo abaixo de version adicione o nome “homepage” e na URL substitua pelo seu nome de usuário e o nome do repositório criado.

```
  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://{SEU NOME DE USUARIO}.github.io/{NOME DO REPOSITÓRIO}",
  "private": true,
```

Depois adicione os comandos de deploy e predeploy em “scripts”

```
"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
```

Quando finalizar faça o commit dessas alterações e o push para o repositório remoto.

#### Configurando o Github pages

No Github abra o seu repositório e vá em settings e depois em pages e em “Build and deployment” altere a branch para “gh-pages” e a pasta para “/root”.

![](https://cdn-images-1.medium.com/max/1024/1*RRYjYsblDwOQ8HI8fDKLAw.png)
_Tela do github para configuração do Github Pages_

#### Importando o widget no Notion

Com a url que foi gerada para o seu site, abra o notion e adicione o bloco “integrar”

![](https://cdn-images-1.medium.com/max/372/1*WRYVQxAHprAsMoCJe6xxKg.png)
_tela do notion_

E cole o link que foi utilizado na “homepage” do seu package.json, se tudo funcionar você vai ter um relógio parecido com esse

![](https://cdn-images-1.medium.com/max/1024/1*-SfHBIuFrB7aiWFifHrAPQ.png)
_Captura da tela do Notion com o widget_

Se você gostou desse artigo e quer utilizar esse widget, você encontra o link para ele e outras coisas mais na minha página

[Marcelle Vargas](https://marcellevargas.bio)

**Fonte**

Biblioteca React Gh Pages

[GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages](https://github.com/gitname/react-gh-pages)

Imagem do Bulbasauro, por [Dhiogo Luis](https://br.pinterest.com/dgolsd90/) ([https://pin.it/2FJguai](https://pin.it/2FJguai))