rfc

react-faq-component

React package to render FAQ section

Showing:

Popularity

Downloads/wk

1.6K

GitHub Stars

20

Maintenance

Last Commit

5mos ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

3.9KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

react-faq-component

release open issues license Build

An accessible React package to render FAQ section. view demo

Install

npm install --save react-faq-component

Usage

import React, { useEffect, useState } from "react";
import Faq from "react-faq-component";

const data = {
    title: "FAQ (How it works)",
    rows: [
        {
            title: "Lorem ipsum dolor sit amet,",
            content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,
              ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.
              In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.
              Fusce sed commodo purus, at tempus turpis.`,
        },
        {
            title: "Nunc maximus, magna at ultricies elementum",
            content:
                "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.",
        },
        {
            title: "Curabitur laoreet, mauris vel blandit fringilla",
            content: `Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc, ac sagittis leo elit vel lorem.
            Fusce tempor lacus ut libero posuere viverra. Nunc velit dolor, tincidunt at varius vel, laoreet vel quam.
            Sed dolor urna, lobortis in arcu auctor, tincidunt mattis ante. Vivamus venenatis ultricies nibh in volutpat.
            Cras eu metus quis leo vestibulum feugiat nec sagittis lacus.Mauris vulputate arcu sed massa euismod dignissim. `,
        },
        {
            title: "What is the package version",
            content: <p>current version is 1.2.1</p>,
        },
    ],
};

const styles = {
    // bgColor: 'white',
    titleTextColor: "blue",
    rowTitleColor: "blue",
    // rowContentColor: 'grey',
    // arrowColor: "red",
};

const config = {
    // animate: true,
    // arrowIcon: "V",
    // tabFocus: true
};

export default function App {

    return (
        <div>
            <Faq
                data={data}
                styles={styles}
                config={config}
            />
        </div>
    );
}

data props

The data passed to react-faq-component is an object having below keys(mentioned in the table).

attributetypeoptionaldetails
titleStringtrueText displayed as the title/header of the FAQ section
rowsArraytrueArray of obj containing title and content of each row

config props (optional)

const config = {
    animate: true,
    arrowIcon: "V",
};

The config passed to react-faq-component is an object having below keys(mentioned in the table).

attributetypeoptionaldetails
animateBooleantrueWhether to enable the (row) content animation (default val : true)
arrowIconJSX/stringtrueCustom component to display instead of default arrow
tabFocusBooleantrueWhether to add outline on tab focus (default val : false). Focus outline is added when keyboard tab is used to navigate through the contents

styles props format

styles attribute in data is optional and can be used to change text/bg color in FAQ component. e.g:

const data = {
  title: ...,
  rows: [...],
  styles: {
    // bgColor: 'white',
    titleTextColor: 'blue',
    // titleTextSize: '48px',
    rowTitleColor: 'blue',
    // rowTitleTextSize: 'medium',
    // rowContentColor: 'grey',
    rowContentTextSize: '16px',
    // rowContentPaddingTop: '10px',
    rowContentPaddingBottom: '10px',
    rowContentPaddingLeft: '50px',
    // rowContentPaddingRight: '150px',
    // arrowColor: "red",
    //transitionDuration: "1s",
    // timingFunc: "ease"
  }
}
attributetypeoptionaldefault valuedetails
bgColorStringtruewhitebackground color of faq-component
titleTextColorStringtrueblacktext color of FAQ title/header text
titleTextSizeStringtrue30pxsize of FAQ title/header text
rowTitleColorStringtrueblacktext color of title text of rowItems
rowTitleTextSizeStringtruelargesize of title text in rowItems
rowContentColorStringtrueblacktext color of row content in rowItems
rowContentTextSizeStringtruemediumsize of row content in rowItems
arrowColorStringtrueblackcolor of row arrow
rowContentPaddingTopStringtrue0value of padding-top of row content in rowItems
rowContentPaddingBottomStringtrue0value of padding-bottom of row content in rowItems
rowContentPaddingLeftStringtrue0value of padding-left of row content in rowItems
rowContentPaddingRightStringtrue0value of padding-right of row content in rowItems
transitionDurationStringtrue0.3stransition duration for expanding row content
timingFuncStringtrueeasetransition function for expanding row content

If the above style options are not enough, you can write you own custom css to apply styles on the elements.

.faq-row-wrapper {
    .faq-title {
    }

    .faq-body {
        .faq-row {
            .row-title {
            }

            .row-content {
                .row-content-text {
                }
            }
        }
    }
}

Example with css style

These classnames are applied to the elements and do not contain any styles.

getRowOptions props (optional)

A function is passed as a value to getRowOptions prop, which gets called with an array parameter. The length of the array is the same as the number of rows present in FAQ data. 3 functions in an object are exported per row to toggle and scrollTntoView.

[
    // option for first row item
    {
        close: () => {},
        expand: () => {},
        scrollIntoView: (option) => {}, // option values : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters
    },
    {...},
    {...},
    {...},
];

Example:

export default function SampleFaqApp() {
    const [rows, setRowsOption] = useState(null);

    useEffect(() => {
        if (rows) {
            setTimeout(() => {
                rows[0].expand();
            }, 2500);

            setTimeout(() => {
                rows[0].close();
            }, 5000);

            setTimeout(() => {
                rows[0].scrollIntoView();
                // rows[0].scrollIntoView(true);
            }, 10000);
        }
    }, [rows]);

    return (
        <div>
            <h2 className="section-title">FAQ section</h2>

            <div className="faq-style-wrapper">
                <Faq data={data} getRowOptions={setRowsOption} />
            </div>
        </div>
    );

Note: On accessing invalid array index, an error will be logged in console.

Screenshot

Screenshot 1


Screenshot 2

License

MIT © binodswain

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial