mohebifar / mohebifar/react-native-copilot

Enhancement request: allow passing of custom props to currentStep from CopilotStep.

Open
#78 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement help wanted
Dominant language
TypeScript
Stars
2.4k
Forks
428
PR merge metrics
No merged PRs in 30d

Description

Hey ya'll

I'd like to suggest an enhancement to the currentStep object/prop that gets passed to custom components like tooltipComponent and stepNumberComponent.

It would be great if we could allow passing in custom props from CopilotStep. A situation where this would be useful is when you have a customizable custom tooltip component like so:

const CustomToolTipComponent = ({
  isFirstStep,
  isLastStep,
  handleNext,
  handlePrev,
  handleStop,
  currentStep,
}) => (
  // ...
  <Button>{currentStep.toolTipButtonText}</Button>
);
// ...
copilot({
  tooltipComponent: TooltipComponent
})(RootComponent)
<CopilotStep
  order={1}
  name="hello"
  text="Custom button text"
  toolTipButtonText="Cool btn txt right"
>
...
</CopilotStep>

Looking at the source, I think a simple update to ConnectedCopilotStep when registering steps could allow a enhancement like this. Perphaps passing along the rest of the props like this would be a bad idea:

this.props._copilot.registerStep({
  name: this.props.name,
  text: this.props.text,
  order: this.props.order,
  target: this,
  wrapper: this.wrapper,
  ...this.props,
});

We could add a dedicated prop to CopilotStep named something like options woul d do the trick:

<CopilotStep
  order={1}
  name="hello"
  text="Custom button text"
  options={{ toolTipButtonText: "Cool btn txt" }}
>
this.props._copilot.registerStep({
  name: this.props.name,
  text: this.props.text,
  order: this.props.order,
  target: this,
  wrapper: this.wrapper,
  options: this.props.options,
});

Let me know what ya'll think and if ya'll are 👍 on this I'd be glad to put a PR together.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating ConnectedCopilotStep and the registration call shown in the issue, then trace how registered step data becomes the currentStep passed to tooltipComponent and stepNumberComponent. Decide how the proposed custom options should flow through without exposing unrelated props. Done means a CopilotStep can provide custom values that are available on currentStep, with coverage for the resulting behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.