Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] [BREAKING] Exporting existing components props to allow extension #362

Open
petertodorov opened this issue Aug 6, 2021 · 5 comments

Comments

@petertodorov
Copy link

Hi there, I am wondering if there is a way to create a new custom component (e.g. MyCustomTabs) based on react-bulma-components Tabs component by also adding a new type to the already existing ones type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'?

I see that the interface coming with Tabs from 'react-bulma-components'

interface TabsProps {
  align?: 'center' | 'right';
  size?: Size;
  type?: 'toggle' | 'boxed' | 'toggle-rounded';
  fullwidth?: boolean;
}

is not exported so I cannot import it and extend it with additional types where I need it.The dummy example I provide will end up with TS throwing an error that <Tabs> Type 'MYCUSTOTYPE' is not assignable to type '"toggle" | "boxed" | "toggle-rounded" | undefined'.

  export interface MyCustomTabsProps {
  className?: string
  renderAs?: string
  align?: 'center' | 'right'
  size?: 'small' | 'medium' | 'large' | string
  type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'
  fullwidth?: boolean
}
  export const MyCustomTabs: React.FC<MyCustomTabsProps> = ({
  className, 
  renderAs,
  ...props
  }): JSX.Element => {
    return (
      <Tabs  className={className} {...props}>
        <Tabs.Tab renderAs={renderAs || 'span'}>
           Tab content
         </Tabs.Tab>
      </Tabs>
     )
  }

If you can provide any advice if what I am trying to do is feasible at all or any way to solve the issue, I will be thankful.
I was also wondering if there is any particular reason for not exporting the interfaces of the of the elements/components from bulma-react-components, since this might be of use in cases like that?

Last but not least,
thank you for the amazing work you're all doing with react-bulma-components
All the best,

@kennethnym
Copy link
Collaborator

I can see why this is useful. There isn't any particular reason for hiding the interfaces. When I wrote the types I didn't think of this use case where users may want to wrap our components with their custom components, but it is so common I should've thought of it.

@petertodorov
Copy link
Author

Hey @kennethnym thanks for writing. Indeed, it would've been quite handy to have them exported. Anyways, if you have any suggestion how I may solve the issue, would be greatly appreciated if you share it here.

@kennethnym
Copy link
Collaborator

Unfortunately, there isn't an elegant way to extend the props other than manucally copying all the props to your custom interface. I can make a PR that makes all the props public, so that you can import and extend them.

@petertodorov
Copy link
Author

Hey @kennethnym, thanks for the propsoal for the PR that makes the props public, i guess this will be of use

@kennethnym kennethnym changed the title [HELP] Extending existing interface props? [REQUEST] Extending existing interface props Aug 26, 2021
@kennethnym
Copy link
Collaborator

@petertodorov @RJSonnenberg sorry for months of radio silence. I've created two new branches, develop and ts-def, please follow them for updates on this issue.

@kennethnym kennethnym changed the title [REQUEST] Extending existing interface props [WIP] Exporting existing components props to allow extension Nov 16, 2021
@kennethnym kennethnym self-assigned this Nov 16, 2021
@kennethnym kennethnym added the WIP label Nov 16, 2021
@kennethnym kennethnym pinned this issue Nov 16, 2021
@kennethnym kennethnym changed the title [WIP] Exporting existing components props to allow extension [WIP] [BREAKING] Exporting existing components props to allow extension Nov 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants