Reactstrap: Typescript definition files

[albertkim]

I'm coming over from react-bootstrap, as that repository doesn't support Bootstrap 4, and it doesn't seem like they will anytime soon. I'm liking the support this repo is seeing, and I hope it continues well into Bootstrap 4's development.

I'm also a heavy Typescript user for my projects, as I found it to be immensely beneficial for the projects I work on. I'd like to request Typescript definition files for the project.

I currently maintain a small, simple custom-made .d.ts file for the components I am actively using, built based off the documentation available for Reactstrap. I'm wondering if there would even be interest in such a definition file out in the public, especially considering that Bootstrap 4 is still in an alpha (soon to enter beta) state.

If there is interest, would the project maintainers consider including the file in the repository, or would it remain as a separately maintained project?

Edit:
My temporary d.ts file that I'm using for personal use atm:

https://github.com/albertkim/reactstrap.d.ts

[benbarber]

+1 I see a lot of big projects moving towards including the definitions in the main repository as TypeScript is becoming more popular.

[TheSharpieOne]

Idk about typescript, but I am seeing a lot more flowjs in react projects. Probably has something to do with it being made by Facebook as well and that it is not its own language but just annotations the as well as it just being overall better.

[eddywashere]

Still thinking about this one. I've leaned towards flowjs based on what I've read but I haven't used either enough to make a good decision. Happy to link out to a repo in the meantime in the Readme.

[dpoineau]

@eddywashere just curious, is there a reason you would have to choose one over the other (typescript vs flow) to include in the repo? Why not include both (assuming contributors are willing to provide them)?

As an example example, redux includes both typescript and flow types in its repo:

• typescript: https://github.com/reactjs/redux/blob/master/index.d.ts
• flow: https://github.com/reactjs/redux/blob/master/index.d.ts

Including them directly in the repository just makes it more convenient for users to find, consume, and help maintain them, as opposed to having to look for and maintain them in a separate definitions repository.

[TheSharpieOne]

Correct redux flow link: https://github.com/reactjs/redux/tree/master/flow-typed

Looking into it, it shouldn't be too difficult since we already know types thanks to PropType. We just need to convert the PropTypes to Flow and TypeScript and expose those in their respected files. Flow appears to have an additional step of publishing to flow-typed such as it was done for the aforementioned redux and react-redux

We could also start using one of those things cough flow cough pretty easily in the project itself, replacing PropTypes https://flowtype.org/docs/react.html ~(Though I am not sure if it generates PropTypes in development to get the run-time validation. If it does not, then other developers using this lib without flow or typescript would lose any prop type checking.)~ https://www.npmjs.com/package/babel-plugin-flow-react-proptypes

[ahuntke]

+1 I would really appreciate definition files for reactstrap

[albertkim]

Note: I'm still in the process of writing it, but if people feel that this could be helpful they're free to use it:

https://github.com/albertkim/reactstrap.d.ts

This does happen to be my first TS definition file, so I'm still in the process of learning best practices. Only about a third of the components are in here. I'll be trying to get them up to speed over the next few days.

[TheSharpieOne]

@albertkim awesome! My only nitpick is reactstrap doesn't limit certain values, allowing the CSS framework, which is bootstrap, to be extended by the developer using the variant mixins provided by bootstrap. Limiting colors for instance would prevent this. I would either just have it be string or pipe string on at the end.
Also, if you find any irregularities, such as tag only accepting a string as it should always (AFAIK) be Function | string, open an issue (or a PR) to fix the issue.

[albertkim]

Cool. I was uncertain whether the strict string typings would be useful or not. I guess it's best left flexible. Thanks for the feedback.

[ehartford]

Please support both Flow and Typescript even if you personally use one or neither. It's good karma.

[theduke]

@TheSharpieOne how about merging in @albertkim s definition for now and improve it as things move along?

Maybe albert would offer to help keeping them up to date? (good karma ;) )

[TheSharpieOne]

I don't have merge permission to this repo (probably for the best), but if @albertkim wants to make a PR, that's the first step.

[eddywashere]

+1 to pr. I'm personally interested in flow, but happy to work with both in repo. Let's see where this goes : ]

[hasanmumin]

Hi, all elements needs attr of html elements. But as i see Props of defined in typescript missing html attrs
For example:
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/reactstrap

Col look like this:

export type ColumnProps
  = string
  | boolean
  | number
  | {
    size?: boolean | number | string
    push?: string | number
    pull?: string | number
    offset?: string | number
  };

interface Props {
  xs?: ColumnProps;
  sm?: ColumnProps;
  md?: ColumnProps;
  lg?: ColumnProps;
  xl?: ColumnProps;

  //custom widths
  widths?: string[];
}

declare var Col: React.StatelessComponent<Props>;
export default Col;

But i can't use className attr. You need add

[key: string]: any;

to the props types.

Like this;

interface Props {
    xs?: ColumnProps;
    sm?: ColumnProps;
    md?: ColumnProps;
    lg?: ColumnProps;
    xl?: ColumnProps;

    //custom widths
    widths?: string[];
    [key: string]: any;
}

or you can extends React.HTMLProps. Like this:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-bootstrap/index.d.ts#L784

[radicand]

Thanks for the work on these files on the DT repo - I went to use them today and discovered the Carousel components are untyped still. Is this the best place to note that?

[KurtPreston]

@radicand See #746. There's a PR on DefinitelyTyped right now that adds Carousel definitions (DefinitelyTyped/DefinitelyTyped#22512).

Also, you don't have anything to do with http://radicand.com/, do you?

[radicand]

@KurtPreston thanks - I'll keep an eye on that. I'm not associated with the .com - I missed the chance to buy the domain some years back :)

[TheSharpieOne]

Closes as the community has provided definitions: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/reactstrap