TS forwardRef support

Open
#878 1 comment 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Read the provided TypeScript/React forwardRef reproduction first and trace the parser entry point that turns it into {}. Compare the related Storybook reports for expected behavior; done means this input is recognized rather than producing {}, with a regression test covering the result.

Written by the indexing model from the issue text.

Description

new feature typescript

The following input:

import React, { forwardRef } from 'react';

interface ButtonProps {
  variant?: 'small' | 'large';
  disabled?: boolean;
  children: React.ReactNode;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { disabled = false, variant = 'small', children },
  ref
) {
  return (
    <button type="button" disabled={disabled} ref={ref}>
      {children} {variant}
    </button>
  );
});

Produces:

{}

It's come up several times in Storybook: https://github.com/storybookjs/storybook/issues/8894 and https://github.com/storybookjs/storybook/issues/9511

Filed from https://github.com/storybookjs/storybook/pull/24165

Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
3h 28m
Merged PRs (30d)
6

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.

More from reactjs/react-docgen

All issues in reactjs/react-docgen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.