How to use ink - 10 common examples

'author': { type: 'string', alias: 'a' },
    'strict': { type: 'boolean', alias: 's', default: false },
    'debug': { type: 'boolean', alias: 'd', default: false },
  },
});

cli.flags = cli.flags || {};
cli.flags.path = process.cwd();

// Check if the given path is valid git repository
if (!fs.existsSync(path.join(cli.flags.path, '/.git'))) {
  console.log('The command must be run inside a git repository');
  process.exit(1);
}

render(React.createElement(ui, cli.flags));

return new Promise(resolve => {
    let app: Instance | undefined

    const onDone = () => {
      if (app) {
        app.unmount()
        app.waitUntilExit()
      }
      // .write as console.log introduces an unwanted linebreak here
      process.stdout.write(ansiEscapes.eraseLines(11)) // height of the dialog
      resolve()
    }

    app = render(
      
        
          
        
      ,
    )
  })
}

};

	let unmount; // eslint-disable-line prefer-const

	const onError = () => {
		unmount();
		process.exit(1);
	};

	const onExit = () => {
		unmount();
		process.exit();
	};

	// Uses `h` instead of JSX to avoid transpiling this file
	unmount = render(h(ui, {skinNumber, onSelectEmoji, onError, onExit}));
};

let unmount // eslint-disable-line prefer-const

   const onError = () => {
      unmount()
      process.exit(1)
   }

   const onExit = () => {
      unmount()
      process.exit()
   }

   const { dev } = cli.flags

   // Uses `h` instead of JSX to avoid transpiling this file
   unmount = render(h(emma, { dev, onError, onExit }))
}

const render = (opts, content = {}) => {
  const { h, renderToString } = require('ink') // eslint-disable-line
  const Table = require('ink-table').default

  if (opts.json) {
    console.log(JSON.stringify(content, null, 2))
  } else if (opts.parseable) {
    console.log(['collaborator', 'access'].join('\t'))
    Object.keys(content).forEach(collab => {
      console.log([collab, content[collab]].join('\t'))
    })
  } else if (!opts.silent && opts.loglevel !== 'silent') {
    const data = Object.keys(content).map(collab => {
      return { collab, role: content[collab] }
    })
    console.log(renderToString())
  }
}
<table></table>

bold: true,
          dim: isDisabled(config, id),
          hex: disabledColor || normalColor
        }, `${isActive ? '⌛  ' : emoji ? `${emoji}  ` : ''}${title}`), _react.default.createElement(_ink.Color, {
          bold: false,
          hex: _palette.hexMuted,
          dim: isDisabled(config, id)
        }, description ? `: ${description}` : ''));
      },
      // Remove the indicator
      indicatorComponent: _ => ''
    };
    const showOptions = !isFlaggedStart && !removeOptions;
    return _react.default.createElement(_ink.Box, {
      flexDirection: "column"
    }, showOptions ? _react.default.createElement(_ink.Box, {
      marginBottom: 1
    }, _react.default.createElement(_ink.Color, {
      dim: isTaskRunning(messages)
    }, _react.default.createElement(_templates.OptionsTemplate, {
      selectProps: OptionsSelectProps
    }))) : null, !(0, _utils.isEmpty)(messages) && _react.default.createElement(_templates.MessageTemplate, {
      messages: messages,
      isFlaggedStart: isFlaggedStart
    }));
  }

hex: disabledColor || normalColor
        }, `${isActive ? '⌛  ' : emoji ? `${emoji}  ` : ''}${title}`), _react.default.createElement(_ink.Color, {
          bold: false,
          hex: _palette.hexMuted,
          dim: isDisabled(config, id)
        }, description ? `: ${description}` : ''));
      },
      // Remove the indicator
      indicatorComponent: _ => ''
    };
    const showOptions = !isFlaggedStart && !removeOptions;
    return _react.default.createElement(_ink.Box, {
      flexDirection: "column"
    }, showOptions ? _react.default.createElement(_ink.Box, {
      marginBottom: 1
    }, _react.default.createElement(_ink.Color, {
      dim: isTaskRunning(messages)
    }, _react.default.createElement(_templates.OptionsTemplate, {
      selectProps: OptionsSelectProps
    }))) : null, !(0, _utils.isEmpty)(messages) && _react.default.createElement(_templates.MessageTemplate, {
      messages: messages,
      isFlaggedStart: isFlaggedStart
    }));
  }

itemComponent: ({
        emoji,
        id,
        title,
        description,
        isSelected
      }) => {
        const isActive = currentTask && currentTask.title === title && isTaskRunning(messages);
        const disabledColor = isDisabled(config, id) && (isSelected ? '#CCC' : _palette.hexMuted);
        const normalColor = !isDisabled(config, id) && (isSelected ? _palette.hexHighlight : _palette.hexDefault);
        return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ink.Color, {
          bold: true,
          dim: isDisabled(config, id),
          hex: disabledColor || normalColor
        }, `${isActive ? '⌛  ' : emoji ? `${emoji}  ` : ''}${title}`), _react.default.createElement(_ink.Color, {
          bold: false,
          hex: _palette.hexMuted,
          dim: isDisabled(config, id)
        }, description ? `: ${description}` : ''));
      },
      // Remove the indicator

export function useStdin(
  keyHandler: ({ actionKey: ActionKey, text: string, key: Key }) => void,
  deps: any[] = [],
) {
  let { stdin, setRawMode } = inkUseStdin()

  // stdin = stdin || process.stdin
  // setRawMode = setRawMode || process.stdin.setRawMode

  emitKeypressEvents(stdin)

  let didCancel = false

  React.useEffect(() => {
    function handler(text: string, key: Key) {
      if (!didCancel) {
        keyHandler({ actionKey: action(key), text, key })
      }
    }

    setRawMode!(true)

return new Promise(resolve => {
    let app: Instance | undefined

    const onDone = async () => {
      if (app) {
        app.unmount()
        app.waitUntilExit()
      }
      await exit()
    }

    app = render(
      
        
      ,
    )
  })
}