@smashing/side-sheet v1.0.2

Side Sheet

yarn add @smashing/side-sheet

Basic example

    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>

Change position

    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              position='top'
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>

Hide closing button

    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              isClosingButtonVisible={false}
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>