# google-classroom-share

> Classroom Share Button

Latest version **0.5.6** (published 2021-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install google-classroom-share
pnpm add google-classroom-share
yarn add google-classroom-share
bun add google-classroom-share
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.6 |
| Published | 2021-05-12 |
| First published | 2020-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.15.0 |
| Dependencies | 7 |
| Unpacked size | 471 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Roberto Ribeiro |
| Maintainers | robertov8 |
| Keywords | react, react-component, reactjs, google, google-classroom-share, classroom-share |

## Links

- npm: https://www.npmjs.com/package/google-classroom-share
- Repository: https://github.com/robertov8/google-classroom-share
- Homepage: https://robertov8.github.io/google-classroom-share
- Issues: https://github.com/robertov8/google-classroom-share/issues
- npm.io page: https://npm.io/package/google-classroom-share

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [object-hash](https://npm.io/package/object-hash.md) ^2.1.1
- [react-scripts](https://npm.io/package/react-scripts.md) 3.0.0
- [react-load-script](https://npm.io/package/react-load-script.md) ^0.0.6
- [react-loading-skeleton](https://npm.io/package/react-loading-skeleton.md) ^2.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.6 (latest) — 2021-05-12
- 0.5.5 — 2021-05-08
- 0.5.4 — 2020-09-05
- 0.5.3 — 2020-09-05
- 0.5.2 — 2020-09-04
- 0.5.1 — 2020-09-04
- 0.5.0 — 2020-09-04
- 0.4.0 — 2020-09-04

## README

# google-classroom-share

<a><img alt="npm" src="https://img.shields.io/npm/v/google-classroom-share?&style=flat-square"></a>
<a><img alt="node-current" src="https://img.shields.io/node/v/google-classroom-share?style=flat-square"></a>
<a><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/robertov8/google-classroom-share?style=flat-square"></a>
<a><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/google-classroom?style=flat-square"></a>
<a><img alt="npm" src="https://img.shields.io/npm/dm/google-classroom"></a>
<a><img alt="GitHub issues" src="https://img.shields.io/github/issues/robertov8/google-classroom"></a>
<a><img alt="NPM" src="https://img.shields.io/npm/l/google-classroom"></a>
<a><img alt="GitHub stars" src="https://img.shields.io/github/stars/robertov8/google-classroom?style=flat-square"></a>

You can add and customize the Classroom share button to meet the needs of your 
website, such as modifying the button size and load technique. By adding the Classroom
share button to your website, you allow your users to share your content to their 
classes and drive traffic to your site.

# Install 
```
yarn add google-classroom-share react-load-script
```

# Demo
![](./assets/sharebutton.gif)
https://robertov8.github.io/google-classroom-share

https://developers.google.com/classroom/guides/sharebutton


# Usage
```javascript
import React from 'react';

import GoogleShareToClassRoom from '../index';

function App() {
  return (
    <GoogleShareToClassRoom
      body="Example Body"
      itemType="assignment"
      url="https://developers.google.com/classroom"
      size={50}
      title="Example Title"
      theme="light"
      onShare={(type) => console.log(`GoogleShareToClassRoom:${type}`)}
      onShareComplete={() => console.log('GoogleShareToClassRoom:onShareComplete')}
      onShareStart={() => console.log('GoogleShareToClassRoom:onShareStart')}
    />
  );
}

export default App;
```

## Props
| Prop            |  Type    | Description
| --------------- | -------- | -----------
| body            | String   | Sets the item body text to share to Classroom.
| itemType        | String   | "announcement, assignment, material, question" This will automatically show the creation dialog after the user first selects a course (or immediately if courseid is also specified).
| url             | String   | Sets the URL to share to Classroom. If you set this attribute by using gapi.sharetoclassroom.render, you should not escape the URL.
| size            | Number   | Sets the size in pixels of the share button. If the size is omitted, the button uses 32.
| title           | String   | Sets the item title to share to Classroom.
| theme           | String   | Sets the button icon for the selected theme.
| onShare         | String   | If specified, sets the name of a function is called when the share dialog opens and user finishes sharing your link.
| onShareComplete | Function | If specified, sets the name of a function is called when the user finishes sharing your link.
| onShareStart    | Function | If specified, sets the name of a function is called when the share dialog opens.

---
_Source: https://npm.io/package/google-classroom-share · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._