DEV Community: Renato Hideki Osaka

Marvel

Renato Hideki Osaka — Fri, 23 Oct 2020 19:46:49 +0000

Hoje é uma dica de app. Que dev nunca teve aquela idéia genial e 5 minutos depois estava lá sentado digital linhas e mais linhas de código sem pensar no amanhã. E depois de horas digitando quando vai testar o que foi desenvolvido muita coisa não fazia sentido, e ai a motivação vai lá pro chão.

Então hoje quero deixar a dica de um app mobile chamado Marvel. Disponível para Android e iOS. Com ele você consegue desenhar as telas do seu app em uma folha qualquer, isso mesmo desenhar no lápis e papel e depois poderá visualizar como as telas se comportarão no celular antes mesmo de programar uma única linha.

Com isso tenho certeza que você poupará horas de trabalho e retrabalho. Testem ai e comentem a sua experiência.

Context Api

Renato Hideki Osaka — Wed, 21 Oct 2020 19:13:16 +0000

Como passar dados entre components sem cair no temido props hell? Simples vamos utilizar a Context Api do próprio ReactJS.

Para utilizar a context api preciamos criar a context propriamente dita, e um provider para prover os dados.

Ao criar uma context vc precisa passar um objeto com as definições do seu conteúdo

import { createContext } from 'React'

interface MyContextProps {
  value: string
}

const MyContext = createContext<MyContextProps>({} as MyContextProps)

Para que sua árvore de components consiga utilizar essa context você precisa criar um provedor da context.

<MyContext.Provider value={{ value: 'my string' }}>
  <App />
</MyContext.Provider>

Agora tudo que estiver dentro de <App /> ou de qualquer outro component que esteja dentro do provedor da context poderá utilizar os dados context através do hook useContext

import React, { useContext } from 'react'

import MyContext from './contexts/MyContext.ts'

export const App: React.FC = () => {
  const context = useContext(MyContext)

  return (
    <p>{context.value}</p>
  ) 
}

Com o conceito de context você poderá por exemplo controlar a autenticação do seu sistema, ou o tema de seu site para mudar entre dark e light.

Segue o link de um exemplo de um contador usando context api , https://github.com/renatoosaka/context-api-reactjs.

Criando um Modal em ReactJS

Renato Hideki Osaka — Tue, 20 Oct 2020 12:45:18 +0000

Preciso de uma janela modal em meu sistema ou site e agora o que fazer? Desenvolver o meu próprio componente ou instalar uma biblioteca inteira só para usar um simples modal?

Muitos escolhem a segunda opção, as vezes pela facilidade de estar pronto, outros por falta de conhecimento para desenvolver o próprio componente. Então decidi compartilhar com vocês um simples exemplo em ReactJS.

import React, { useState, useEffect } from 'react'
import ReactFrom from 'react-dom'

import './modal.css'

import React, { useState, useEffect } from 'react'
import ReactDom from 'react-dom'

import './modal.css'

interface ModalProps {
  isShowing: boolean;
  toggle: () => void;
}

const Modal: React.FC<ModalProps> = ({ isShowing, toggle, children }) => { 
  useEffect(() => {
    const listner = function (e: KeyboardEvent ) {
      if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
        e.preventDefault();
        e.stopPropagation();

        isShowing && toggle();
      }
    }

    window.addEventListener('keyup', listner)

    return (() => {
      window.removeEventListener('keyup', listner)
    })

  }, [isShowing, toggle])

  return (
    isShowing ? ReactDom.createPortal(
      <div className="modal-overlay">
        <div className="modal-wrapper">
          <div className="modal">
            {children}
          </div>
        </div>
      </div>, document.body
    ) : null
  )
}

interface ModalHeaderProps {
  toggle: () => void;
}

export const ModalHeader: React.FC<ModalHeaderProps> = ({ toggle, children }) => (
    <div className="modal-header">
        {children || 'Title'}
    <button 
            className="modal-button-close" 
            data-dismiss="modal" 
            aria-label="Close" 
        onClick={toggle}
    >
      &times;
    </button>    
    </div>
)

export const ModalBody: React.FC = ({ children }) => (
    <div className="modal-body">
        {children}
    </div>
)

export const ModalFooter: React.FC = ({ children }) => (
    <div className="modal-footer">
        {children}
  </div>
)

export const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  function toggle() {
    setIsShowing(!isShowing);
  }

  return {
    isShowing,
    toggle,
  }
}

export default Modal;

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal {
  z-index: 100;
  background: white;
  position: relative;
  margin:20px auto;
  border-radius: 3px;
  max-width: 800px;
  padding: 8px;
  border-radius: 4px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
  font-weight: bold;
}

.modal-button-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.modal-body {
  padding: 8px 0;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 8px 0;  
}

Agora para usar o componente criado é simples

import React from 'react';
import Modal, {
    ModalHeader, 
    ModalBody, 
    ModalFooter, 
    useModal
} from './components/Modal'

function App() {
  const { isShowing, toggle } = useModal();

  return (
    <div>
      <button onClick={toggle}>
        Modal 
      </button>

      <Modal {...{isShowing, toggle}}>
        <ModalHeader {...{toggle}}>
          My Title
        </ModalHeader>
        <ModalBody>
          Hello World!
        </ModalBody>
        <ModalFooter>
          <button onClick={toggle}>
            Cancel
          </button>
        </ModalFooter>        
      </Modal>
    </div>
  );
}

export default App;

Link do github https://github.com/renatoosaka/useModal