# material-ui-gif-textbox

> ##### Component that is built on top of Material UI, and React Giphy Searchbox.

Latest version **1.2.4** (published 2020-10-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install material-ui-gif-textbox
pnpm add material-ui-gif-textbox
yarn add material-ui-gif-textbox
bun add material-ui-gif-textbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2020-10-06 |
| First published | 2020-09-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 450.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eli Hood |
| Maintainers | elihood |

## Links

- npm: https://www.npmjs.com/package/material-ui-gif-textbox
- Repository: https://github.com/EliHood/materialui-gif-textbox
- Homepage: https://github.com/EliHood/materialui-gif-textbox#readme
- Issues: https://github.com/EliHood/materialui-gif-textbox/issues
- npm.io page: https://npm.io/package/material-ui-gif-textbox

## Dependencies (6)

- [react-dropzone](https://npm.io/package/react-dropzone.md) ^11.2.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1
- [@material-ui/types](https://npm.io/package/@material-ui/types.md) ^5.1.0
- [react-giphy-searchbox](https://npm.io/package/react-giphy-searchbox.md) ^1.4.0

## Recent versions

- 1.2.4 (latest) — 2020-10-06
- 1.2.3 — 2020-10-05
- 1.2.2 — 2020-10-05
- 1.2.1 — 2020-10-04
- 1.2.0 — 2020-10-04
- 1.1.0 — 2020-10-02
- 1.0.6 — 2020-09-21
- 1.0.4 — 2020-09-15
- 1.0.3 — 2020-09-15
- 1.0.2 — 2020-09-15
- 1.0.1 — 2020-09-15
- 1.0.0 — 2020-09-15

## README

## Material UI Text/Gif/Attachment Comment Box

##### Component that is built on top of Material UI, and React Giphy Searchbox.

![](snapshot.gif)

### Install

```
npm i material-ui-gif-textbox
```

### **Basic Example**

```js
import CommentBox from "material-ui-gif-textbox";
function App() {
  const [commentBody, setCommentBody] = useState("");
  const [gifUrl, setGifUrl] = useState("");
  const [files, setFiles] = useState([]);
  const selectGif = React.useCallback(
    (e) => {
      setGifUrl(e.images.downsized_large.url);
      setCommentBody("");
    },
    [setGifUrl, setCommentBody]
  );
  const commentChange = React.useCallback(
    (data) => {
      setGifUrl("");
      setCommentBody(data);
    },
    [setGifUrl, setCommentBody]
  );
  const onSubmit = (e) => {
    e.preventDefault();
    const data = {
      url: gifUrl,
      content: commentBody,
      file: files,
    };
    console.log(data);
  };
  return (
    <CommentBox
      type="gif-comment"
      apiKey="9Ixlv3DWC1biJRI57RanyL7RTbfzz0o7"
      commentChange={(e) => commentChange(e.target.value)}
      content={commentBody}
      gifChange={selectGif}
      gifUrl={gifUrl}
      onSubmit={onSubmit}
      files={files}
      setFiles={setFiles}
      haveAttachment={true}
    />
  );
}
```

---
_Source: https://npm.io/package/material-ui-gif-textbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._