https://github.com/cucumber/react-components
React components for Cucumber
https://github.com/cucumber/react-components
cucumber gherkin javascript polyglot-release react
Last synced: 4 months ago
JSON representation
React components for Cucumber
- Host: GitHub
- URL: https://github.com/cucumber/react-components
- Owner: cucumber
- License: mit
- Created: 2016-09-28T11:41:12.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2026-01-20T22:39:54.000Z (5 months ago)
- Last Synced: 2026-01-21T03:42:50.003Z (5 months ago)
- Topics: cucumber, gherkin, javascript, polyglot-release, react
- Language: TypeScript
- Homepage:
- Size: 77.3 MB
- Stars: 35
- Watchers: 72
- Forks: 11
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @cucumber/react-components
> A set of React components for rendering Gherkin documents and Cucumber results.
Preview and examples:
https://cucumber-react-preview.netlify.app/
## Usage
- This package is distributed in ES module format only.
- React 18 or above is required.
The source code for the screenshot above is:
```jsx
import { EnvelopesProvider, FilteredDocuments } from '@cucumber/react-components'
```
`envelopes` should be an array of [Cucumber Messages](https://github.com/cucumber/messages) that came from a test run. You can obtain these from most Cucumber implementations by using a "Message" formatter.
## Attachments
Attachments from test runs are shown with their corresponding steps. The baseline behavior for attachments is a download button. However, we have some special handling for common MIME types to make them more useful without leaving the report:
- `image/*` - images are rendered with an `![]()
` tag
- `video/*` - videos are rendered with a `
```
In your CSS, you can set the background and text colors, and override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired:
```css
.dark-theme {
background-color: #1d1d26;
color: #c9c9d1;
--cucumber-anchor-color: #4caaee;
--cucumber-keyword-color: #d89077;
--cucumber-parameter-color: #4caaee;
--cucumber-tag-color: #85a658;
--cucumber-docstring-color: #66a565;
--cucumber-error-background-color: #cf6679;
--cucumber-error-text-color: #222;
--cucumber-code-background-color: #282a36;
--cucumber-code-text-color: #f8f8f2;
--cucumber-panel-background-color: #282a36;
--cucumber-panel-accent-color: #313442;
--cucumber-panel-text-color: #f8f8f2;
}
```
### Custom styles
For more control over the styling, you can override the CSS used by individual components.
Let's say you want to do something totally different with the typography of doc strings. In your own CSS, you might write something like:
```css
.acme-docstring {
font-weight: bold;
font-style: italic;
background-color: black;
color: hotpink;
text-shadow: 1px 1px 2px white;
padding: 10px;
}
```
Then, you can provide an `overrides` prop to the `CustomRendering` component, in the form of an object that declares which class names you're going to override and what with:
```jsx
```
Some components have multiple styling hooks - e.g. the `` component has the `tags` class name for the list, and the `tag` class name for each item. In these cases, you can provide custom class names for just the ones you want to change, and any you omit will pick up the built-in styling like normal.
### Custom rendering
To change the rendering of some components entirely, you can selectively provide your own component implementations to be used instead of the built-in ones.
Staying with the doc string example, you can use the same `overrides` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
```jsx
(
<>
I am going to render this doc string in a textarea:
{props.docString.content}
>
)
}}>
```
In each case where you provide your own component, it will receive the same props as the default component, plus two more:
- `styles` - class names for the default styling, so you can still apply these to your custom component if it makes sense
- `DefaultRenderer` - the default React component, useful if you only want to provide your own rendering for certain cases, and otherwise fall back to the default rendering (don't forget to pass it the props)