binodswain / react-faq-component Goto Github PK

Trying to add className by reading the recent PR, can't figure out how. would be good if document can state how. :)

Thanks for the great lib

Hello Good Day,

I want to use this library for my project.
Can you help me with how to remove the border when I clicked an faq item ?

Many thanks and always keep safe :)

Dear Developers,
I need to use react-faq-component directly from CDN and the reason is because I need to embed an app within GSite. I tried the following and I am not sure how to use react-faq-component after it. Could you please help?

index.html

<!-- react faq -->
<script src="https://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.min.js"></script>
<script type="text/babel" data-type="module" src="my.js"></script>

my.js

// this gives error 
const Faq = ReactFaqComponent.Faq;

error

(index):11 Uncaught ReferenceError: ReactFaqComponent is not defined

I need expand one youtube video after expanding the FAQ. but I can't get the event that trigger the expanding process. There is one way?

Hello,
could this plugin be updated to work with React v.17?
Thank you!

Currently I have my styles set to:

const faqStyles = {
  bgColor: '#2f3136',
  titleTextColor: 'white',
  rowTitleColor: '#ffea00',
  rowContentColor: 'white'
}

However, the dropdown arrows don't seem to take on any color except for black:

I believe this is due to them just being generated from SVGs, which are black, but it'd be nice to be able to edit them so that they contrast better with background colors other than white.

Hi,how can I give the styles in scss to change the text font-sizes depending on screen resolution?

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-faq-component
npm ERR! react-faq-component@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

demonstrate component usage with newly added props.

• add tabindex 0 to make row elements focusable.
• add roles list and list items to faq wrapper and rows.

Hi,
How can I use it in my react with typescript project?

Because it uses styled components, simply changing the style in a CSS is not straight-forward.
There is no id or class that can be referred to as an identifier in the CSS.
Nor are the provided styling attributes enough.

Request : Add class names or id's to each element of the component.

The current design only enables us to change the colour of the content and not the size.

Generally, it should allow the user to provide all sorts of styling, but sizing is a bare minimum.

Is there a way to add IDs to titles?

Hello, this component seems to be quite good and provides a seamless solution as a part of enhancement there is a scope of adding the accordion behavior as similar to bootstrap one

Hi Binod, thanks for the awesome module. This is a handy feature request.

Would it be possible to collapse other questions when expanding a question so that only one section is expanded at a given time?

Hi!

Love this quick library, but 1 thing I am needing right now is to have the 1st tab open when the user first loads the page. What's the easiest way to achieve this?

it would be nice to be able to manipulate the layout of the FAQ.

Manipulate it as Flex row/col, or as GRID.

Nice work for the library.

Just 1 request, is it possible for the rowTitleText become bolder?
Now I can set the title color, just wanna to set the rowTitleText become bold.

I think the arrow icon is available with only 1 type and just rotate it when click row.
Can we use +/- style icon, so show - icon when collapse and show + icon when expand.

I need to send req to backend to fetch data for that particular row when that row gets expanded on click

trying to use icon
config={{ arrowIcon: {DownChevron} }}

Received the following error while building gatsby application.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=1 30&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

No issues in gatsby develop mode.

It'd be nice to add some CSS animations (possibly optional) for the dropdowns. Would make the page feel more interactive.

I have used the component in my react app and it works flawlessly, but now I am implementing this in next js and it is giving an error that says can't resolve prop-types and is unable to compile.