search

Bunlong / react-papaparse

react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.
https://react-papaparse.js.org
MIT License
365 stars 61 forks source link

Customize UI #34

Closed takebo closed 4 years ago

takebo commented 4 years ago

Is there a way to customize the styles of the components? Especially on the drag and drop, i want to customize the box that shows up with the filename, progress bar, etc

glinkot commented 4 years ago

Yes, I'm here for the same reason. Looking at csvreader.tsx, the very narrow width (100px) of the filename box looks strange and I'd like to widen it and get rid of the gradient. I tried various things like the below, hoping I could modify the dropFile part of the internal 'styles' object, but no success so far. Any thoughts would be great!

  const myStyle = {
        dropFile: {
            width: 400
        }
    }
        return (
            <CSVReader
            style={myStyle}
            onError={handleOnError}
                onFileLoad={handleOnFileLoad}
                config={papaConfig}
                addRemoveButton
                onRemoveFile={handleOnRemoveFile}
            >
                <span className="fileDrop">{props.promptText}</span>
            </CSVReader>
        )

At line 431 of csvreader.tsx we have this:

<div style={Object.assign({}, styles.dropFile, styles.column)}>

If we could just add props.style to the end of that, would we be in business?

Bunlong commented 4 years ago

@takebo @glinkot Well, I will check it and release it for the next version next week. Anyway could I add you in the contributors list?

takebo commented 4 years ago

@Bunlong Nice, thank you. Sure, i wouldn't mind.

glinkot commented 4 years ago

Sure! Thanks :)

Sent from Outlook Mobilehttps://aka.ms/blhgte

From: Bruno notifications@github.com Sent: Thursday, July 16, 2020 10:21:21 PM To: Bunlong/react-papaparse react-papaparse@noreply.github.com Cc: glinkot foley.mark@gmail.com; Mention mention@noreply.github.com Subject: Re: [Bunlong/react-papaparse] Customize UI (#34)

@Bunlonghttps://github.com/Bunlong Nice, thank you. Sure, i wouldn't mind.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Bunlong/react-papaparse/issues/34#issuecomment-659374854, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADICH4YOJEPNIQIMNQJVRPLR33WEDANCNFSM4OXMKMSA.

glinkot commented 4 years ago

Hi @Bunlong, any luck putting this small change in? I'd rather not bugger about forking it just to change that one line 👍.

My app looks great except for the big weird grey box in the middle...

Thanks for your help

Bunlong commented 4 years ago

@glinkot @takebo Please upgrade react-papaparse to latest version (3.5.0) and check the following wiki to customize CSVReader. You were added to contributors list. Thanks!

react-papaparse v3.5.0 has been released!

Minor version with the following changes:

Wiki:

glinkot commented 4 years ago

Fantastic, thanks so much for that! I'll check this out tomorrow morning, looking forward to it.

On Tue, 28 Jul 2020 at 04:03, Bunlong VAN notifications@github.com wrote:

@glinkot https://github.com/glinkot @takebo https://github.com/takebo Please upgrade react-papaparse to latest version (3.5.0) and check the following wiki to customize CSVReader. You were added to contributors list. Thanks!

react-papaparse v3.5.0 has been released!

Minor version with the following changes:

  • Enable to customize CSVReader (Drag Upload) dropFile style

Wiki:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Bunlong/react-papaparse/issues/34#issuecomment-664550965, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADICH44J3B5VMVD7IXOV7FDR5W6OVANCNFSM4OXMKMSA .

takebo commented 4 years ago

That is awesome @Bunlong ! Thanks alot!

Bunlong commented 4 years ago

@takebo @glinkot You are very welcome. Could we close the issue? Thanks!

glinkot commented 4 years ago

Yes, for sure. Thanks again.

Bunlong commented 4 years ago

@glinkot You are very welcome. Thanks!