We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More
useEditState
You can manually enter and exit edit mode by tapping into the useEditState
hook. You should always have a /pages/admin.{js,tsx}
file but in some cases you may want to go into edit mode without going to the /admin
or /admin#/logout
routes.
In this case you can use the useEditState
hook. This will enter you into edit mode (and trigger a TinaCloud login if applicable).
For example, you may wish to provide your editors with a button to login and logout without having to navigate to /admin
and /admin#/logout
.
import { useEditState } from 'tinacms/dist/edit-state'const MyEditButton = () => {const { edit, setEdit } = useEditState()return (<buttononClick={() => {setEdit((editState) => !editState)}}>{edit ? 'exit exit mode' : 'Enter edit mode'}</button>)}
Another example is that you may have UI on a page that you only want editors to see.
import { useEditState } from 'tinacms/dist/edit-state'const MyPublicPage = () => {const { edit } = useEditState()return (<div><main>public content....</main>{edit && <EditorOnlyUI />}</div>)}
Note that the tinacms/dist/edit-state (>2kb)
code will be in your production bundle with this pattern.
© TinaCMS 2019–2025