Remix Integration
Remix is a modern, full-stack framework with a strong emphasis on user experience and web standards.
These instructions assume you’ve already created a JamComments account as well as a “site” within that account. If you haven’t, learn more about that process on the Getting Started page.
Prerequisites
In order to use this plugin, you’ll need a JamComments account, where you’ll also need to have created a site and generated an API key.
Installation
Environment Variables
After installation, set the following environment variables for your Remix application:
Environment Variables
Variable | Description |
---|---|
JAM_COMMENTS_DOMAIN | The root domain of your site (without https:// ). |
JAM_COMMENTS_API_KEY | The API key found in your account settings. |
JAM_COMMENTS_ENVIRONMENT | The environment JamComments will use to determine if it should render dummy comments. If this isn’t set, NODE_ENV is used. |
Usage
In order to fetch comments for a route, we’ll use the fetchMarkup()
function from @jam-comments/remix/server
. To avoid polluting browser code with Node built-ins, it’s recommended that you re-export that function from a *.server.ts
file:
Then, retrieve the data and pass it to the <JamComments />
component. For more information on fetch options, see here.
Overriding Copy in UI
The JamComments UI comes with its own set of copy for its components (submission confirmation, submit button text, etc.). Many of this copy can be overridden.
Property | Where It Appears | Default |
---|---|---|
confirmationMessage | In the success banner after submitting a comment. | ”Comment successfully submitted!” |
submitButton | In the comment submission button. | ”Submit” |
namePlaceholder | In the “name” input. | (empty) |
emailPlaceholder | In the “email” input. | (empty) |
commentPlaceholder | In the comment textarea. | ”Write something in plain text or Markdown…” |
writeTab | In the tab for composing a comment. | ”Write” |
previewTab | In the tab for previewing a comment. | ”Preview” |
authButton | In the link for signing in or registering. | ”Log In or Register” |
logOutButton | In the link for logging out. | ”Log Out” |
You can pass these values in the copy
prop:
Setting a Date Format
The default date format for comments is 'm/d/Y
. If you’re from another country, that might be weird. So, you can customize it by using the dateFormat
option:
Contributions
The source for this plugin is open to contributions. If you have a bug fix or idea for improvement, leave a pull request or issue in the GitHub repository.