Как сделать такой всплывающий React компонент?

Question

[Andrew Morozov]

Как правильно сделать такой простой React компонент?
При нажатии на кнопку, выводится информация к примеру "зарегистрирован"......

Answer 1

[GeminiX]

https://www.w3schools.com/howto/howto_js_snackbar.asp

Comments

[Andrew Morozov]

Нужен React компонент

[GeminiX]

гуглите react snackbar / react notification
что-то уже пробовали?

[Andrew Morozov]

Александр, Да, гуглил, находил примеры, но мне нужен максимально простой, который просто выводит текст, и через несколько секунд пропадает... Пытался сделать это как функцию, что бы при нажатии на кнопку вызывать ( передавая текст сообщения ).....

[Andrew Morozov]

Александр, И в большинстве примерах используются библиотеки..

[GeminiX]

они же открытые все, внутрь библиотеки посмотрите

[Andrew Morozov]

Александр, Эти все библиотеки такие огромные, что пока вытащу от туда только то что нужно, пройдёт год)

[Andrew Morozov]

Александр, Там же в одной библиотеке куча видов.... А мне нужна мега простоя, нажал на кнопку, появилась с текстом, через пару секунд пропала

[GeminiX]

вот простой пример показать скрыть элемент по таймауту, вместо элемента ваш простой снэкбар как в самой первой моей ссылке

https://codesandbox.io/embed/thirsty-rosalind-o9pd...

[deantek]

mark1505,

const [show, setShow] = React.useState(false);
  
  const showNotify = () => {
    setShow(true)
    setTimeout(() => setShow(false), 3000)
  }

  return (
  
      <div>
        <button  onClick={showNotify}>trigger</button>
          <div
            style={{
              position: 'absolute',
              background: "green",
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: '25px',
              padding: '10px 20px',
              transition: '0.3s ease',
              opacity: show ? 1 : 0,
              bottom: '50px',
              left: '50px'
            }}>
            notify
          </div>
      </div>
  );