Hello, World!
Hello, world
Hello, world
Hello, world
Here is where the main content of the page goes!
Hello, world
Here is where the main content of the page goes!
This is an Overlay!
Use the `PageTools` component to render content related to the current page.
Warning: Please select at least one option.
404 - this page does not exist
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
| String | |
| Default | `""` |
|---|
Code monkey
> Code ninja
Modal content
: null}
);
};
```
**Modifier keys**
```js
useKeyPress('CMD+S', () => {
console.log('Save it!');
});
```
**Listen for multiple keys**
```js
useKeyPress(['s', 'h'], (e) => {
console.log(e.key); // 's' or 'h'
});
```
### `useLayout`
A hook that gets information about the layout. Pulls data from the [layout
gatsby config](#layout). Useful to provide consistency for layout styles (such
as `maxWidth` and `contentPadding`.)
```js
import { useLayout } from '@newrelic/gatsby-theme-newrelic';
```
**Arguments**
none
**Returns**
`Object`
Contains the values defined in the Gatsby [`layout`](#layout) config.
**Examples**
```js
const MyComponent = () => {
const { contentPadding } = useLayout();
return (
{`current count is ${count}, previous count is ${prevCount}`}
)
}
```
### `useWarning`
A hook that will take a test parameter that, if false, will trigger a warning in the console.
```js
import { useWarning } from '@newrelic/gatsby-theme-newrelic';
```
**Arguments**
- `test` _(any)_ : Determines if the message is shown in the console
- `message` _(string)_: Text to be displayed in the console
- `once` _(boolean)_: **not required**, defaults to true, determines if the warning is shown each time `test` is false, or just once
**Returns**
none
**Examples**
```js
const { mobileBreakpoint } = layout;
useWarning(
mobileBreakpoint,
'MobileHeader: The mobile breakpoint is missing. Please set the `layout.mobileBreakpoint` option in `gatsby-config.js`',
{once = false}
);
```
## I18n
This theme uses [`react-i18next`](https://react.i18next.com/) to handle
translations. All modules are re-exported from this theme so that you can use
them in your site.
Example:
```js
import { useTranslation, Trans } from '@newrelic/gatsby-theme-newrelic';
```
## Announcements
Sites that utilize this theme can specify accouncements that appear at the top
of the site (using the [Banner](#banner) component under the hood).
Announcements can be added by creating `.mdx` files in the `src/announcements`
directory. The first announcement that matches the current date will be shown.
Because announcements use `mdx` under the hood, you **must** ensure that
`gatsby-plugin-mdx` is installed and configured.
**NOTE:** If the `src/announcements` directory does not exist, the theme will
create it automatically.
**Front matter**
| key | Required | Format | Description |
| ----------- | -------- | ------------ | ------------------------------------------------------------------ |
| `startDate` | Yes | `YYYY-MM-DD` | The date that the announcement banner should start showing. |
| `endDate` | Yes | `YYYY-MM-DD` | The date the announcement banner should stop showing (end of day). |
**Example**
```mdx
---
startDate: 2020-09-01
endDate: 2020-10-20
---
# Example header!
This is some _example_ text.
```
## Utils
### `formatCode`
Utility function that formats a string of code using
[prettier](https://prettier.io).
**Arguments**
- `code` _(string)_: The string of code to be formatted
- `options` _(object) - optional_: Formatting options forwarded to `prettier`
when formatting the string of code. For a list of all available options, visit
the [prettier documentation](https://prettier.io/docs/en/options.html).
- `options.language` _(string)_: Tells the function the language of the code
that will be formatted through prettier. This is used to detect a suitable
`parser` for the code. This is recommended if you are not setting the
`parser` option yourself. If no suitable parser is found for the current
language, or if the `language` option is not specified, this will fall back
to the `babel` parser. For more info on available
[plugins](https://prettier.io/docs/en/browser.html#plugins) and
[parsers](https://prettier.io/docs/en/options.html#parser), see the
[Prettier](https://prettier.io/) documentation.
**Default:**
```js
import parserBabel from 'prettier/parser-babel';
const defaultOptions = {
trailingComma: 'es5',
printWidth: 80,
tabWidth: 2,
semi: true,
singleQuote: true,
plugins: [parserBabel],
parser: 'babel',
};
```
### `addPageAction`
Utility to send data to New Relic as page action events. Will automatically send the anonymous user ID as part of the event tracking via the Local Storage variable `ajs_anonymous_id`. Will send the customer ID if the user is denoted as logged in via the Local Storage variable `ajs_user_id`
**Arguments:**
- eventName: Camel cased event name to be sent to New Relic.
- category: Title cased category to be sent to New Relic.
- options: Can send any desired key/value pair to New Relic.
**Example:**
```js
import { addPageAction } from '../utils/nrBrowserAgent.js';
addPageAction({
eventName: 'feedbackRating',
category: `${titleCaseify(feedbackType)}FeedbackClick`,
path: location.pathname,
});
```
## Testing
If you are using [Jest](https://jestjs.io) to write tests for your Gatsby site,
you may consider adding some additional configuration to ensure your tests run
successfully.
### Mocking `ReactDOM.createPortal` for snapshot testing
If you are testing your components using [snapshot
tests](https://jestjs.io/docs/en/snapshot-testing#snapshot-testing-with-jest)
while using
[`react-test-renderer`](https://reactjs.org/docs/test-renderer.html), you may
encounter the following error while trying to render components that use a
[portal](https://reactjs.org/docs/portals.html) (such as the `Overlay`
component):
```
Warning: An invalid container has been provided. This may indicate that another renderer is being used in addition to the test renderer. (For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) This is not supported.
```
As of this writing, there is an outstanding
[issue](https://github.com/facebook/react/issues/11565) that has not been
addressed in `react-test-renderer`. To fix this, you will need to create
a mock for `react-dom` to mock the `createPortal` API. Add the following to your
project:
```js
// __mocks__/react-dom.js
module.exports = {
...jest.requireActual('react-dom'),
createPortal: (element) => element,
};
```