Hi! Can someone help me showing a snackbar after a document action? I am trying everything and can't make it work

10 replies

Last updated: Jan 12, 2021

Dec 29, 2020, 3:54 PM

Hi! How are you doing it now?

Dec 30, 2020, 8:53 AM

user H

the first thing i am trying to do is importing the Snackbar like this:

import Snackbar from "part:@sanity/components/snackbar/item";

After that, i have a button with a onclick function called handleSend, and i am returning this: (I am missing now some code sorry)

const handleSend = () => {

//generateCreativeWorks(value, document)

return (

<Snackbar>

This is my snackbar

</Snackbar>

Is this the way to go? Thank you!

Dec 30, 2020, 9:55 AM

I've tried inside a component (example above) and inside a documentAction, similar way 🙂

Dec 30, 2020, 9:57 AM

user H

any update on this? )

Jan 4, 2021, 8:58 AM

Have you tried giving the snackbar an id?

<Snackbar
        kind="error"
        key={Math.random()}
        title="Snackbar title"
        subtitle="testing"
      />

Jan 4, 2021, 9:05 AM

I will try with this and come back here and let you know!

Jan 4, 2021, 11:26 AM

user H

i try this solution but can't make it work 😞 i am not recieving any console errors or warnings

Jan 8, 2021, 10:47 AM

import PropTypes from 'prop-types'

import React from 'react'

import { FormBuilderInput, withDocument } from 'part:@sanity/form-builder'

import Button from 'part:@sanity/components/buttons/default'

import { generateCreativeWorks } from '../lib/cappture'

//import SnackbarItem from 'part:@sanity/components/snackbar/item'

import Snackbar from "part:@sanity/components/snackbar/item";

class GenerateCreativeWork extends React.Component {

static propTypes = {

type: PropTypes.shape({

title: PropTypes.string,

options: PropTypes.shape(),

}),

level: PropTypes.number,

focusPath: PropTypes.array,

onFocus: PropTypes.func,

onChange: PropTypes.func,

onBlur: PropTypes.func,

_inputElement = React.createRef()

focus() {

if (this._inputElement.current) {

this._inputElement.current.focus()

render() {

const {

document,

value,

level,

focusPath,

onFocus,

onBlur,

onChange,

} = this.props

const { inputComponent, ...type } = this.props.type

const handleSend = () => {

//console.log("SHOW SNACKBAR")

//generateCreativeWorks(value, document)

return (

<Snackbar

kind="error"

key={Math.random()}

title="Snackbar title"

subtitle="testing"

/>

return (

<div>

<FormBuilderInput

level={level}

ref={this._inputElement}

type={type}

value={value}

onChange={onChange}

path={[]}

focusPath={focusPath}

onFocus={onFocus}

onBlur={onBlur}

/>

<Button style={{ marginTop: 20 }} onClick={handleSend}>Link article(s) to this review</Button>

</div>

export default withDocument(GenerateCreativeWork)

Jan 8, 2021, 10:48 AM

user H

i've manage to solve this)For anyone with similar problems this worked for me:

<Snackbar

id="snackbar"

style={{ bottom: 75 }}

kind={snackBarKind}

key={Math.random()}

title={snackbarMessage}

subtitle={snackbarSubtitle}

isOpen={snackBarOpen}

isPersisted={true}

isCloseable={true}

offset={75}

onClose={closeSnackbar}

onSetHeight={() => { }}

/>

Jan 10, 2021, 9:28 AM

that’s great to hear, good job!

Jan 12, 2021, 1:38 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.