@carmensteffens/cs_popup v1.0.2

cs_popup

Component reactJS para uso interno.

Instalação

npm install --save @carmensteffens/cs_popup

Como usar

1. Comece importando o PopUpProvider, na raiz do projeto.

//È ele quem vai gerenciar quando nossas popups devem aparecer

import { PopUpProvider} from '@carmensteffens/cs_popup/dist/index.js'

ReactDOM.render(
    <PopUpProvider>
        <App />
    </PopUpProvider>
    , document.getElementById('root'))
  }
}

2. Agora vamos importar o PopUp,o css e o PopUpContext no projeto.

import { PopUp, PopUpContext } from '@carmensteffens/cs_popup/dist/index'
import '@carmensteffens/cs_popup/dist/index.css'

const App = () => {

  //Usamos o ContextAPI para consumir os dados do nosso provider.
  const { PopUpContent, setPopUpContent } = React.useContext(PopUpContext) 
  
  return (
    <div>
      {//No componente PopUp, passamos "component" e "closeAction"}
      {//Eles controlam oque será exibido e tambem oque será excutado pelo botao X}
      <PopUp component={PopUpContent} closeAction={setPopUpContent} />
      
      <button onClick={() => {
        //Con tudo configurado, basta chamarmos a função setPopUpContent e passarmos o componente que desejamos exibir!
        setPopUpContent(<div className='card'>Sou um PopUp!</div>)
      }}>click</button>
    </div>
  )
}

export default App

Pronto! Agora você ja tem sua PopUp!

MIT © CarmenSteffens