Learn how to build a snippet manager extension that lets developers store and organize code snippets directly within the Replit workspace.
react-feather
package with npm install react-feather
.public/extension.json
(the Extension manifest file).
tools
property to extension.json
and provide a tool that handles the /
route of your application. This will allow your extension to appear as a tool in the sidebar.
src/App.jsx
App
function and add state variables snippets
and newSnippetValue
. snippets
will store all of the snippets you’ve created and newSnippetValue
will be a string for when you create a new snippet.
status
and error
properties from the useReplit hook
within the App
function.
The status
property is an enumerated value indicating whether the handshake connection with Replit is loading
, ready
, or has resulted in an error
.
loading
and error
statuses from the useReplit
hook. If the Extension is neither loading nor has resulted in an error, the main content will be rendered.
src/App.css
to apply basic styling to your exstension. If you refresh the extension, the snippets you’ve added will be saved.
insertSnippet
within the App
function.
App
function after the h1
tag. This will be a basic form to create a new snippet.
updateSnippets
in App
. This will allow us to update the snippets
state variable and save it using the replDb module at the same time.
insertSnippet
function, use the updateSnippets
function to insert and save newSnippetValue
to the list of snippets.
src/App.css
to style the snippet creation form:
loadSnippets
in App
. This function will fetch all the snippets from the Replit database and update the snippets
state variable.
useReplitEffect
hook to run the loadSnippets
function once, when Replit successfully connects to your Extension.
.create-snippet-form
element. Display each snippet as a paragraph from the snippet
state variable.
Snippet
component with the click of a button.
Create a file src/components/Snippet.jsx
and import the following dependencies:
Snippet
component. The props declared in this component are as follows:
content
is the value of the snippetindex
is a number signifying the index of the snippetsnippets
is a full list of all the snippets in the databaseupdateSnippets
is the asynchronous function passed down from the App
componentisEditing
and value
. isEditing
indicates whether the snippet is being edited and value
is the new value which will be used when editing the snippet, before it is saved.
value
to content
whenever content
updates. The prop will change when snippets get edited and deleted.
copyToClipboard
. Handle the asynchronous clipboard event with the .then()
and .catch()
methods. Use the messages
module to display whether the action was successful or not.
saveEdit
. This will update the current snippet to reflect the value
state variable and save it to the database.
deleteSnippet
. After it is confirmed that the user wants to delete the snippet, remove the snippet from both the application state and the database.
Snippet
component with the following JSX code. If the snippet is being edited, a different component will be shown.
src/App.css
:
App.jsx
, import the Snippet
component.
.snippet-list
div to render the new component.