##### Component that is built on top of Material UI, and React Giphy Searchbox.
npm install material-ui-gif-textbox##### Component that is built on top of Material UI, and React Giphy Searchbox.
``
npm i material-ui-gif-textbox
`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 (
apiKey="9Ixlv3DWC1biJRI57RanyL7RTbfzz0o7"
commentChange={(e) => commentChange(e.target.value)}
content={commentBody}
gifChange={selectGif}
gifUrl={gifUrl}
onSubmit={onSubmit}
files={files}
setFiles={setFiles}
haveAttachment={true}
/>
);
}