Support custom name and ID attributes

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Change log
 
 ## master (unreleased)
+* Remove 'unused' import of Trix to prevent webpack packaging conflicts with projects.
+* Support ID and Name input attribute as component props.
 
 ## 1.0.6 (17-September-2020)
 

readme.md

@@ -29,6 +29,7 @@ yarn add react-trix-rte
 
 ```javascript
 import React, { useState } from "react";
+import Trix from "trix";
 import { ReactTrixRTEInput } from "react-trix-rte";
 
 export default function TrixEditor(props) {
@@ -53,6 +54,8 @@ export default function TrixEditor(props) {
 
 | Name                | Type | Description |
 | ------------------- | ---- | ----------- |
+| id                  | string   | The HTML id attribute for the input field
+| name                | string   | The HTML name attribute for the input field
 | toolbarId           | string   | If a custom toolbar is used for the Trix Input, pass the `toolbarId` of the custom toolbar to the input. |
 | isRailsDirectUpload | boolean | React Trix editor support direct uploading of the files to the service if you are using Rails as a backend server. This defaults to `false` |
 | placeholder         | string | Adds a placeholder to the React Trix Input |
@@ -83,6 +86,7 @@ export default function TrixEditor(props) {
 
 ```javascript
 import React, { useState } from "react";
+import Trix from "trix";
 import { ReactTrixRTEInput, ReactTrixRTEToolbar } from "react-trix-rte";
 
 export default function TrixEditor(props) {
@@ -111,6 +115,7 @@ Read more about [contributing](https://github.com/abhaynikam/react-trix-rte/blob
 
 ### Author
 [Abhay Nikam](https://www.abhaynikam.me/pages/about)
+[CUnknown](https://github.com/CUnknown)
 
 ### License
 This project is licensed under the [MIT License](https://github.com/abhaynikam/react-trix-rte/blob/7704eb681801fe2eacd00a5da50cd0bfb8c0238d/LICENSE)

src/components/ReactTrixRTEInput/ReactTrixRTEInput.jsx

@@ -1,4 +1,3 @@
-import Trix from "trix";
 import PropTypes from 'prop-types';
 import React, { Fragment, useState, useRef, useEffect } from "react";
 
@@ -26,7 +25,8 @@ function ReactTrixRTEInput(props) {
   const trixRTEInputRef = trixInputRef ? trixInputRef : useRef();
   const [value, setValue] = useState(defaultValue);
   const uniqueDateTimestamp = new Date().getTime();
-  const trixRTEInputId = `react-trix-rte-input-${uniqueDateTimestamp}`;
+  const trixRTEInputId = props.id || `react-trix-rte-input-${uniqueDateTimestamp}`;
+  const trixRTEInputName = props.name || "content";
   const directUploadOptions = isRailsDirectUpload ? {
     "data-direct-upload-url": RAILS_DIRECT_UPLOADS_URL,
     "data-blob-url-template": RAILS_SERVICE_BLOB_URL
@@ -73,7 +73,7 @@ function ReactTrixRTEInput(props) {
         id={trixRTEInputId}
         value={value}
         type="hidden"
-        name="content"
+        name={trixRTEInputName}
       />
       <trix-editor
         toolbar={toolbarId}
@@ -88,8 +88,10 @@ function ReactTrixRTEInput(props) {
 }
 
 ReactTrixRTEInput.propTypes = {
+  id: PropTypes.string,
   toolbarId: PropTypes.string,
   defaultValue: PropTypes.string,
+  name: PropTypes.string,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,