Cozy-sharing NPM | npm.io

24.0.0 • Published 6 months ago

Install

Weekly downloads

215

License

MIT

Repository

Last release

6 months ago

Test 'n play

Open the playgrounds in cozy-libs and run yarn start

How to use the lib

In your app, you have to :

import the Provider: import SharingProvider, { ShareButton, ShareModal } from 'cozy-sharing'
import the stylesheet.css: import 'cozy-sharing/dist/stylesheet.css'

Using the built-in components

Some of the exposed components are fully featured components, ready to render. They need a SharingProvider above them in the render tree and the imported stylesheet for their styles.

import { ShareModal } from 'cozy-sharing'

const ToggleModal = () => {
  const [isModalDisplayed, setIsModalDisplayed] = useState(false)

  return (
    <div>
      <Button onClick={() => setIsModalDisplayed(true)}>Open modal</Button>
      {isModalDisplayed && <ShareModal document={doc} />}
    </div>
  )
}

Other components accept a render prop as children that receive some information from the sharing context.

import { SharedDocument } from 'cozy-sharing'

const MyComp = () => {
  return (
    <SharedDocument docId='123'>
      {({ isShared, link }) => (
        {isShared ? link : 'Not shared yet'}
      )}
    </SharedDocument>
  )
}

Usage with hooks

cozy-sharing can now be used with hooks as well:

import { SharingContext } from 'cozy-sharing'

const MyComp = () => {
  const { share } = useContext(SharingContext)

  return <Button onClick={() => share(document, recipients, sharingType, description)}>Share</Button>
}

Share and send mail in development

Cozy apps let users share documents from cozy to cozy.

Meet Alice and Bob. Alice wants to share a folder with Bob. Alice clicks on the share button and fills in the email input with Bob's email address. Bob receives an email with a « Accept the sharing » button. Bob clicks on that button and is redirected to Alice's cozy to enter his own cozy url to link both cozys. Bob sees Alice's shared folder in his own cozy.

🤔 But how could we do this scenario on development environment?

With the docker image

If you develop with the cozy-app-dev docker image, MailHog is running inside it to catch emails.

If cozy-stack has to send an email, MailHog catches it and exposes it on its web interface on http://cozy.tools:8025/.

With the binary cozy-stack

If you develop with the cozy-stack CLI, you have to run MailHog on your computer and tell cozy-stack serve where to find the mail server with some options:

./cozy-stack serve --appdir drive:../cozy-drive/build,settings:../cozy-settings/build --mail-disable-tls --mail-port 1025

This commands assumes you git clone cozy-drive and cozy-settings in the same folder than you git clone cozy-stack.

Then simply run mailhog and open http://cozy.tools:8025/.

Retrieve sent emails

With MailHog, every email sent by cozy-stack is caught. That means the email address does not have to be a real one, ie. bob@cozy, bob@cozy.tools are perfectly fine. It could be a real one, but the email will not reach the real recipient's inbox, say contact@cozycloud.cc.

@cozy/minilog classnames cozy-device-helper cozy-doctypes date-fns lodash react-autosuggest react-tooltip snarkdown

@everything-registry/sub-chunk-1394 @zalastax/nolb-coz

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

1 year ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago