Add the ability to specify the class for the label

README.md

@@ -94,6 +94,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
 | accept        | striing         | `.csv, text/csv`         | File type accepted by file input.                                                |
 | cssClass      | string          | `csv-reader-input`       | A CSS class to be applied to the wrapper element.                                |
 | cssInputClass | string          | `csv-input`              | A CSS class to be applied to the `<input>` element.                              |
+| cssLabelClass | string          | `csv-label`              | A CSS class to be applied to the `<label>` element.                              |
 | label         | string, element |                          | If present, it will be rendered in a `<label>` to describe input aim.            |
 | onFileLoaded  | function        |                          | (**_required_**) The function to be called passing loaded results, see below.    |
 | onError       | function        |                          | Error handling function.                                                         |

dist/index.d.ts

@@ -9,6 +9,7 @@ export interface CSVReaderProps {
     accept?: string;
     cssClass?: string;
     cssInputClass?: string;
+    cssLabelClass?: string;
     fileEncoding?: string;
     inputId?: string;
     inputStyle?: object;

src/__snapshots__/index.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`CSVReader is being rendered 1`] = `
   className="custom-csv-reader"
 >
   <label
+    className="custom-csv-label"
     htmlFor="react-csv-reader"
   >
     CSV input label text

src/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, getAllByRole, queryByDisplayValue } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
 import CSVReader from './index'
@@ -20,6 +20,7 @@ const csvReader = (
     accept=".csv, text/csv, .tsv, test/tsv"
     cssClass="custom-csv-reader"
     cssInputClass="custom-csv-input"
+    cssLabelClass="custom-csv-label"
     fileEncoding="iso-8859-1"
     inputId="react-csv-reader"
     inputStyle={{ color: 'red' }}
@@ -61,6 +62,15 @@ describe('Testing CSVReader props:', () => {
     expect([...inputNode.classList]).toEqual(expect.arrayContaining([cssInputClass]))
   })
 
+  test('has cssLabelClass prop set', () => {
+    const cssLabelClass = 'custom-csv-label'
+    const { getByText } = render(csvReader)
+    const labelNode = getByText("CSV input label text");
+    //const inputNode = getByLabelText('CSV input label text')
+
+    expect([...labelNode.classList]).toEqual([cssLabelClass])
+  })
+
   test('has inputId prop set', () => {
     const inputId = 'react-csv-reader'
     const { getByLabelText } = render(csvReader)

src/index.tsx

@@ -12,6 +12,7 @@ export interface CSVReaderProps {
   accept?: string
   cssClass?: string
   cssInputClass?: string
+  cssLabelClass?: string
   fileEncoding?: string
   inputId?: string
   inputStyle?: object
@@ -26,6 +27,7 @@ const CSVReader: React.FC<CSVReaderProps> = ({
   accept = '.csv, text/csv',
   cssClass = 'csv-reader-input',
   cssInputClass = 'csv-input',
+  cssLabelClass = 'csv-label',
   fileEncoding = 'UTF-8',
   inputId = 'react-csv-reader-input',
   inputStyle = {},
@@ -62,7 +64,7 @@ const CSVReader: React.FC<CSVReaderProps> = ({
 
   return (
     <div className={cssClass}>
-      {label && <label htmlFor={inputId}>{label}</label>}
+      {label && <label className={cssLabelClass} htmlFor={inputId}>{label}</label>}
       <input
         className={cssInputClass}
         type="file"
@@ -80,6 +82,7 @@ CSVReader.propTypes = {
   accept: PropTypes.string,
   cssClass: PropTypes.string,
   cssInputClass: PropTypes.string,
+  cssLabelClass: PropTypes.string,
   fileEncoding: PropTypes.string,
   inputId: PropTypes.string,
   inputStyle: PropTypes.object,