β
ModalComponentProp
- Interface of the modal
prop exposed by the library (specifically for modal components).β
ModalComponentWithOptions
- Interface that adds type support of the modalOptions
property (specifically for Hooks modal components).ModalProp
, ModalComponentProp
and modalfy()
. But for now: let's see how to use the other interfaces we just mentioned.createModalStack()
. So if we were to reuse the same initial example we say in the Creating a stack section, we'd now have:createModalStack()
is already doing it under the hood.modal
prop that your regular component will get access to by using withModal()
HOC. This means that you'll have to keep a few things in mind:ModalComponentProp
instead.useModal()
Hook, no need to employModalProp
as the Hook itself will take care of all the typing. Simply provide your params interface to the Hook as such useModal<ModalStackParams>()
(explained below).ModalProp
then is when you're using a Class component.#L5
with ModalStackParams
. It's an interface you'll have to build that will represent the complete tree of your modals and the types their params are expecting. #L7
to #L11
, we're letting TypeScript know that <PokedexCard/>
expects 3 props that should comply with the types specified in ModalStackParams
. We're doing this to ensure the type safety of these 3 props because we're using them L#24
to open 'PokedexEntryModal'
and pass them as params.ModalStackParams
, we can now guesstimate that it could look something like this a minima:ModalStackParams
could look like/be used in a real-world scenario.ModalStackParams
as a generic to withModal()
#L42
, instead, we directly provided it to React.Component
#L15
, via Props
created #L13
. As you may know, with TypeScript, React.Component
is a generic class that accepts up to 2 arguments: React.Component<Props, State>
. That's why ModalProp
also accepts up to 2 arguments, your params interface and your component props and returns a type with your props type + the new modal
prop. There are a few things to notice here:State
interface, you'll have to provide it to React.Component
as a second argument, not ModalProp
.ModalProp
. If you want, you can even use it without providing the params type. This means that the most basic way of using ModalProp
is class PokedexCard extends React.Component<ModalProp>
ModalProp
gives you access to some sweet autocompleting experience (try to see what you get when you trigger it on openModal()
for instance)!ModalProp
with just some key differences to keep in mind. The first and most important is:ModalComponentProp
should only be used with modal components (rendered by Modalfy)!createModalStack()
config, you should use ModalProp
instead.ModalComponentProp
accepts a 3rd argument, corresponding to the name of the modal represented by this component. If we reuse our PokΓ©dex example, 'PokedexEntryModal'
file could look like:<PokedexEntryModal>
yourself, ModalComponentProp
voluntarily expects props types as its second argument as your modal component could be getting props from some HOCs. ie:ModalComponentProp
API reference to have an exhaustive list of what it brings with it.ModalComponentWithOptions
is only meant to be used with Hooks modal components. If you're working with classes, simply use the staticmodalOptions
property as explained below.modalOptions
from within the modal component itself. ModalComponentWithOptions
and you're done! The interface will also directly take care of the fact that you're using it on a component, so no need to use React.FC
with it. ie:ModalComponentWithOptions<Props>
is used right after the modal variable name, not inside the parenthesis of the arrow function!modalOptions
property with the same ModalOptions
we used to type our modal stack. eg: