Initial commit

.gitignore

@@ -0,0 +1,25 @@
+# dependencies
+/node_modules
+/example/node_modules
+
+/.pnp
+.pnp.js
+
+# next.js
+/example/.next/
+/example/package-lock.json
+
+/out/
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmignore

@@ -0,0 +1 @@
+example

LICENSE

@@ -0,0 +1,24 @@
+The MIT License
+
+MIT License
+
+Copyright (c) 2019 Aral Roca Gomez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+© 2019 GitHub, Inc.

README.md

@@ -0,0 +1,73 @@
+## React Text Toxicity
+
+Detect toxicity in text using React.
+
+It's based on this model: https://github.com/tensorflow/tfjs-models/tree/master/toxicity
+
+## Getting started
+
+```
+yarn add react-text-toxicity
+```
+
+Import as:
+
+```js
+import useTextToxicity from "react-text-toxicity";
+```
+
+Use it as:
+
+```js
+const predictions = useTextToxicity('text', { threshold, delay });
+```
+
+* **text** - Text to predict
+* **options**
+  * **threshold** Prediction threshold *(0.9 as default)*
+  * **delay** Delay in milliseconds applied to debounce multiple changes *(300ms as default)*
+
+
+## Example
+
+![example](./example/toxicity.gif)
+
+```jsx
+import React, { Fragment, useState } from "react";
+import useTextToxicity from "react-text-toxicity";
+
+function Toxicity({ predictions }) {
+  const style = { margin: 10 };
+
+  if (!predictions) return <div style={style}>Loading predictions...</div>;
+
+  return (
+    <div style={style}>
+      {predictions.map(({ label, match, probability }) => (
+        <div style={{ margin: 5 }} key={label}>
+          {`${label} - ${probability} - ${match ? "🤢" : "🥰"}`}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function Index() {
+  const [value, setValue] = useState("");
+  const predictions = useTextToxicity(value);
+
+  return (
+    <div style={{ display: "flex" }}>
+      <div>
+        <div>Write something</div>
+        <textarea
+          style={{ width: 300, height: 200 }}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+      {value && <Toxicity predictions={predictions} />}
+    </div>
+  );
+}
+```

example/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "-",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "next": "9.3.5",
+    "react-text-toxicity": "link:../",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom"
+  }
+}

example/pages/index.js

@@ -0,0 +1,37 @@
+import React, { Fragment, useState } from "react";
+import useTextToxicity from "react-text-toxicity";
+
+function Toxicity({ predictions }) {
+  const style = { margin: 10 };
+
+  if (!predictions) return <div style={style}>Loading predictions...</div>;
+
+  return (
+    <div style={style}>
+      {predictions.map(({ label, match, probability }) => (
+        <div style={{ margin: 5 }} key={label}>
+          {`${label} - ${probability} - ${match ? "🤢" : "🥰"}`}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function Index() {
+  const [value, setValue] = useState("");
+  const predictions = useTextToxicity(value);
+
+  return (
+    <div style={{ display: "flex" }}>
+      <div>
+        <div>Write something</div>
+        <textarea
+          style={{ width: 300, height: 200 }}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+      {value && <Toxicity predictions={predictions} />}
+    </div>
+  );
+}