👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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
Hi! Can someone help me showing a snackbar after a document action? I am trying everything and can't make it work
Dec 29, 2020, 3:54 PM
Hi! How are you doing it now?
Dec 30, 2020, 8:53 AM
Hi
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
Hi
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
Hi
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
Hi
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.

Was this answer helpful?