nexxtway/react-rainbow

Function CustomizationPage has 220 lines of code (exceeds 25 allowed). Consider refactoring.

Open

export default function CustomizationPage(props) {
    const { examples, name, exampleMode, codeRevision } = props;
    const [activeTab, setActiveTab] = useState('overview');
    const example5Ref = useRef();
    const example7Ref = useRef();

File index.js has 390 lines of code (exceeds 250 allowed). Consider refactoring.

Open

/* eslint-disable react/no-unescaped-entities, import/no-extraneous-dependencies */
import React, { useState, useContext, useRef } from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faList } from '@fortawesome/free-solid-svg-icons';

Similar blocks of code found in 3 locations. Consider refactoring.

Open

                        <section ref={example5Ref}>
                            <h3 className="react-rainbow-customization_section-heading">
                                How customize the main color for all the components on my app?
                            </h3>
                            <Playground

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

                        <section ref={example7Ref}>
                            <h3 className="react-rainbow-customization_section-heading">
                                How to do a variation with a specific color for only one component
                                on my app?
                            </h3>

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

                        <section ref={example9Ref}>
                            <h3 className="react-rainbow-customization_section-heading">
                                How use the colors defined on the theme on my own elements of my
                                app?
                            </h3>

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

                        <Playground
                            code={examples[1].content}
                            evalInContext={examples[1].evalInContext}
                            key={`${codeRevision}/1`}
                            name={name}

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

CustomizationPage.propTypes = {
    examples: PropTypes.array.isRequired,
    name: PropTypes.string.isRequired,
    exampleMode: PropTypes.string.isRequired,
    codeRevision: PropTypes.number.isRequired,

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

                        <div className="rainbow-flex rainbow-align_end">
                            <h2 className="react-rainbow-customization_section-heading-2">
                                Theme API
                            </h2>
                            <Badge

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

                        <div className="rainbow-flex rainbow-align_end">
                            <h2 className="react-rainbow-customization_section-heading-2">
                                Theme generate API
                            </h2>
                            <Badge

• Read up
  Read up

Similar blocks of code found in 5 locations. Consider refactoring.

Open

                            <div className="react-rainbow-customization_section-heading-container">
                                <h3 className="react-rainbow-getting-started_section-heading rainbow-m-right_medium">
                                    If you are using React Rainbow on your app, sometimes you may
                                    need to customize the default styles to satisfy your UI/UX based
                                    on business or brand requirements. Either you will need to use

• Read up
  Read up