Syntax Suggestions

[alex-cory]

What do you think about syntax like this?

import { useSheet, SheetProvider } from 'react-modal-sheet'

// root of app
<SheetProvider>
  <XSheet />
  <SomewhereElseInApp />
</SheetProvider>

const SomewhereElseInApp = (props) => {
  const {
    openSheet, // this would default to opening sheet-1
    setSnapPoint,
    closeSheet,
  // all the options below are optional including the ID since you can pass the ID to openSheet
  } = useSheet('x-sheet-id', {
    onClose,
    onOpenStart,
    onOpenEnd,
    onCloseStart,
    onCloseEnd,
    onSnap,
  })
  return (
    <>
      <div onClick={() => openSheet('sheet-id-2')}>Opens Sheet 2 with no props</div>
      <div onClick={() => openSheet('sheet-id-1', props)}>Opens Sheet 1 and passes props to it</div>
      <div onClick={() => openSheet({ name: 'cool', ...props })}>Opens X Sheet and passes props to it</div>
    </>
  )
}

import { Sheet } from 'react-modal-sheet'

const XSheet = () => {
  const {
    isOpen,
    ...props // these are the props passed from `openSheet`
  } = useSheet('x-sheet-id')
  return (
    <Sheet
      id={'x-sheet-id'}
      isOpen={isOpen}
      {...props}
    >
      {/* whatever content for the sheet */}
    </Sheet>
  )
}

This allows us to reuse the same action sheet throughout the app only having to import it once, and passing different props to it wherever we want to use it.

[Temzasse]

Thank you @alex-cory for the suggestion!

Can you provide a bit more background info about this idea? Are there some limitations in the current API design that make it too difficult or impossible to achieve some desired outcome? I'm not sure I'm able to see the benefits of your proposed API design 🤔

[alex-cory]

It allows you to have shareable sheets, and open them from anywhere in your application.

So, your solution assumes we will be setting the state of the sheet to open from within the same component. For instance, if I have a sheet that needs to be shared throughout the app, the only way to open it is via redux, useContext, or other global state management libraries.

If I have a sharable sheet, I need to be able to open it and give it props. This solves for that too.

[Temzasse]

It's quite easy to create a custom global sheet system with React context like you mentioned so I'm quite hesitant to completely rewrite the internal sheet API just to support this use case.

I guess we could have an example for this use case in the examples folder 🤔

[Temzasse]

I'm closing this issue since it's out of the scope of this library. Feel free to fork this lib if the API is not flexible enough for your needs. Happy hacking! 👨🏼‍💻