Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.