MCPcopy Index your code
hub / github.com/daviferreira/react-sanfona

github.com/daviferreira/react-sanfona @v1.5.0

Chat with this repo
repository ↗ · DeepWiki ↗ · release v1.5.0 ↗ · + Follow
37 symbols 84 edges 14 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

react-sanfona

NPM info

Travis build status Depfu

React accordion component

giphy 1

Usage

Install via NPM:

npm install react-sanfona

Then:

import { Accordion, AccordionItem } from 'react-sanfona';

…

  render() {
    return (
      <Accordion>
        {[1, 2, 3, 4, 5].map(item => {
          return (
            <AccordionItem title={`Item ${item}`} expanded={item === 1}>



                {`Item ${item} content`}



            </AccordionItem>
          );
        })}
      </Accordion>
    );
  }

…

options / PropTypes

Accordion

Property Type Description Default
allowMultiple Boolean Allow multiple items to be open at the same time. false
isHovered Boolean Allow expanding an element after the mouse hovers an item. false
openNextAccordionItem Boolean Opens the next accordion item after the previous one is closed. Defaults first one as active and applies for each accordion item except the last one. false
className String Custom classname applied to root element null
style Object Inline styles applied to root element null
onChange Function Triggered when component updates and passes new state as an argument null
rootTag String Custom HTML tag used for root element 'div'
duration Number Open/close transition duration in milliseconds 300
easing String Open/close transition easing 'ease'

AccordionItem

Property Type Description Default
title String/ Object Text or Object to display in header. null
expanded Boolean If item body should be expanded or not false
onExpand Function Callback for when item is expanded null
onClose Function Callback for when item closes null
className String Custom classname applied to root item element null
bodyClassName String Custom classname applied to the accordion item body null
expandedClassName String Custom classname applied when accordion is expanded null
titleClassName String Custom classname applied to accordion item header text null
disabled Boolean If item should be disabled or not false
disabledClassName String Custom classname applied to accordion item header text when item is disabled null
rootTag String Custom HTML tag used for root element 'div'
titleTag String Custom HTML tag used for title element 'h3'
bodyTag String Custom HTML tag used for body element 'div'
duration Number Open/close transition duration in milliseconds 300
easing String Open/close transition easing 'ease'

Styling with classnames

Classname Targets
react-sanfona Accordion container
react-sanfona-item AccordionItem container
react-sanfona-item-expanded AccordionItem container when expanded
react-sanfona-item-title AccordionItem header text
react-sanfona-item-body AccordionItem body container
react-sanfona-item-body-wrapper AccordionItem body children wrapper
react-sanfona-item-disabled AccordionItem is disabled

development

npm install

npm start // served on localhost:8080

npm test

Core symbols most depended-on inside this repo

handleChange
called by 8
src/Accordion/index.js
setMaxHeight
called by 4
src/AccordionItem/index.js
getChildrenActiveItems
called by 3
src/Accordion/utils.js
arrayify
called by 2
src/Accordion/utils.js
getActiveItems
called by 2
src/Accordion/utils.js
cx
called by 1
src/AccordionItemTitle/index.js
renderItems
called by 1
src/Accordion/index.js
isSame
called by 1
src/Accordion/utils.js

Shape

Method 18
Function 12
Class 7

Languages

TypeScript100%

Modules by API surface

src/AccordionItem/index.js14 symbols
src/Accordion/index.js7 symbols
demo/index.js5 symbols
src/Accordion/utils.js4 symbols
src/AccordionItemBody/index.js3 symbols
src/AccordionItemTitle/index.js2 symbols
webpack.config.page.js1 symbols
webpack.config.demo.js1 symbols

For agents

$ claude mcp add react-sanfona \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page