Skip to content

SmartBear/react-gherkin-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

92168e8 · Dec 31, 2024
Nov 5, 2024
Mar 31, 2022
Mar 30, 2022
Apr 26, 2022
Sep 1, 2022
Apr 2, 2019
Jan 18, 2021
Feb 17, 2021
Jan 15, 2021
Jan 18, 2021
Mar 11, 2021
Apr 15, 2022
Dec 18, 2020
Feb 18, 2021
Apr 1, 2022
May 4, 2022
Feb 17, 2021
Dec 31, 2024
Feb 17, 2021
Feb 17, 2021
Nov 22, 2021
Dec 31, 2024

Repository files navigation

React Gherkin Editor

A Gherkin language editor for React.

Version CI Dependencies License

Introduction

React Gherkin Editor is a wrapper arround React Ace Editor specially designed for Gherkin.

Features:

  • Gherkin syntax highlighting
  • Gherkin keyword snippets
  • Easy to provide step autocompletions (Promise based)
  • Gherkin I18n support
  • Special themes for Jira and Cucumber

Installation

Using npm:

npm install --save @smartbear/react-gherkin-editor

Using yarn:

yarn add @smartbear/react-gherkin-editor

Basic Usage

import React from 'react'
import { render } from 'react-dom'
import ReactGherkinEditor from '@smartbear/react-gherkin-editor'

const root = document.createElement('div')
document.body.appendChild(root)

const initialValue = `Feature: Serve coffee
  As a coffee lover
  I can get coffee from the machine
  So I can enjoy the rest of the day

  Scenario: Simple use
    # Well, sometimes, you just get a coffee.
    Given the coffee machine is started
    When I take a coffee
    Then coffee should be served
    And message "Please take your coffee" should be printed`

const steps = [
  'I start the coffee machine using language "lang"',
  'I shutdown the coffee machine',
  'message "message" should be displayed'
]

const onValueChange = console.log

const autoCompleteFunction = async (_keyword, text) => {
  const matches = steps.filter(step => step.startsWith(text))

  const completions = matches.map(match => ({
    caption: match,
    value: match,
    score: Math.floor(Math.random() * Math.floor(100)),
    meta: 'Step'
  }))

  return completions
}

render(
  <ReactGherkinEditor
    initialValue={initialValue}
    onChange={onValueChange}
    autoCompleteFunction={autoCompleteFunction}
    language='en'
    theme='cucumber'
  />,
  root
)

Ace Documentation

React Ace Editor