colorfy-software / react-native-modalfy

🥞 Modal citizen of React Native.
https://colorfy-software.gitbook.io/react-native-modalfy
MIT License
1.06k stars 41 forks source link

Improved TypeScript support #114

Closed v-honcharenko closed 1 year ago

v-honcharenko commented 1 year ago

Added the ability to extend the default ModalfyParams with a custom declaration for better DX. It doesn't make any breaking changes and should work as before if ModalfyCustomParams interface is not overwritten.

Example:

  1. Declare your own ModalStackParams type:

    // modal.types.ts
    export type ModalStackParams = {
    dialog: { title: string };
    };
  2. In the file react-native-modalfy.d.ts (or in the any other place when the createModalStack is called), add:

    
    import 'react-native-modalfy';
    import type { ModalStackParams } '/path/to/modal.types';

declare module 'react-native-modalfy' { interface ModalfyCustomParams extends ModalStackParams {} }


3. Get full support of types out of the box:
```diff
const MyComponent = () => {
  // no need to manually pass declared ModalStackParams 👇
-  const { openModal } = useModal<ModalStackParams>();
+  const { openModal } = useModal();

  const openDialog = () => {
    // types still work well here 👇
    openModal('dialog', { title: 'Title' });
  };
  // ...
}
v-honcharenko commented 1 year ago

@CharlesMangwa I've updated the PR, please, review it. Please, note, in this PR I did not change any existing type like ModalComponentProp due to backward compatibility, so issue #113 sounds reasonable. The current change will allow you to put ModalfyParams as the latest and optional argument in the type.