flexdinesh / react-socks

🎉 React library to render components only on specific viewports 🔥
MIT License
426 stars 29 forks source link

TypeScript typings? #16

Closed alirobe closed 5 years ago

alirobe commented 5 years ago

I'd love to use react-socks, but I'm working on a TS project, and this library doesn't have typings. Any chance of adding them? dts-gen may be able to automatically create during build-time.

Update: managed to adopt react-socks by adding generating react-socks.d.ts using dts-gen -m react-socks, then adding the output to my typings folder (wrapped as a module declaration: declare module "react-socks"{output}), but it would be nice if this was included.

Update 2: this just didn't work in my app for some reason, probably related to general strangeness of my project. Resorted to window.outerWidth >=, which will do fine :)

drewlustro commented 5 years ago

@alirobe – I created a temporary shim until the maintainers build typings.

Replace the breakpoint names with your own:

types/react-socks/index.d.ts

declare module 'react-socks' {
  import React from 'react';

  export function setDefaultBreakpoints(breakpoints: any[]);

  export const BreakpointProvider: React.StatelessComponent<{}>;

  interface Props {
    handset?: boolean;
    tablet?: boolean;
    desktop?: boolean;
    widescreen?: boolean;
    superwidescreen?: boolean;
    up?: boolean;
    down?: boolean;
    only?: boolean;
  }

  export const Breakpoint: React.StatelessComponent<Props>;
}
flexdinesh commented 5 years ago

@alirobe @drewlustro TypeScript is a bit out of my depth. Are you interested in figuring this out? I'm open to reviewing the PR with some help.

drewlustro commented 5 years ago

@alirobe @drewlustro TypeScript is a bit out of my depth. Are you interested in figuring this out? I'm open to reviewing the PR with some help.

I'm down, but I'm not 100% familiar how to create typings with dynamic props. This might be a fun PR though. I'll be sure to let you know if I find time in the next week.