Media client react

Examples

Typescript ❤️

🖼️ Media Client for React

Install

yarn add @atlaskit/media-client-react

npm

@atlaskit/media-client-react

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

4.0.0

Major Changes

#117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

Provides React hooks for easy integration with media client.

Installation

yarn add @atlaskit/media-client-react

Usage

import React, { SyntheticEvent, useState } from 'react';

import {
  defaultCollectionName,
  defaultMediaPickerAuthProvider,
} from '@atlaskit/media-test-helpers';

import {
  MediaClientProvider,
  useFileState,
  useMediaClient
} from '@atlaskit/media-client-react';

// create media client config
const mediaClientConfig = {
  authProvider: defaultMediaPickerAuthProvider(),
};

function App() {
  return (
    // Provide the media client config to your App
    <MediaClientProvider clientConfig={mediaClientConfig}>
      <MyApp />
    </MediaClientProvider>
  );
}

function MyApp() {
  const [fileId, setFileId] = useState<string>('');
  // Access the client
  const mediaClient = useMediaClient();
  const { fileState } = useFileState(fileId, {
    collectionName: defaultCollectionName,
    skipRemote: !fileId,
  });

  const uploadFile = (event: SyntheticEvent<HTMLInputElement>) => {
    const file = event.currentTarget.files![0];

    // upload
    mediaClient.file
      .upload({
        content: file,
        name: file.name,
        collection: defaultCollectionName,
      })
      .subscribe(stream => {
        setFileId(stream.id);
      });
  };
  return (
    <div>
      <input type="file" onChange={uploadFile} />
      <div>
        <h1>File</h1>
        <div>id: {fileState?.id}</div>
        <div>Status: {fileState?.status}</div>
      </div>
    </div>
  );
}

render(<App />, document.getElementById('root'))