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

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

Hi! How are you doing it now?

Hi 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!

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

Hi any update on this? )

Have you tried giving the snackbar an id?

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

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

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)

Hi 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={() => { }}

                

/>

that’s great to hear, good job!