Nutritious Pumpkin Meal

    @smartbear/react-gherkin-editor
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.14 • Public • Published

    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

    Keywords

    none

    Install

    npm i @smartbear/react-gherkin-editor

    DownloadsWeekly Downloads

    658

    Version

    2.4.14

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    77

    Last publish

    Collaborators

    • severine.darlot
    • karam.elhabouti
    • aslakhellesoy
    • marverix
    • vincent-psarga
    • vincentcapicotto
    • jbpros
    • timotheeville
    • aurelien.reeves
    • mcoqblin-smartbear
    • n-murphy
    • smartbear_devops
    • cbon
    • romaingweb