Users Online

· Guests Online: 14

· Members Online: 0

· Total Members: 188
· Newest Member: meenachowdary055

Forum Threads

Newest Threads
No Threads created
Hottest Threads
No Threads created

Latest Articles

A very lightweight accordion component in React

A very lightweight accordion component in React

A very lightweight accordion component in React

react-light-accordion

A very lightweight accordion component in React (only has one dependency).

Installation

yarn install react-light-accordion
Bash

or

npm i react-light-accordion
Bash

Example

import React from 'react';
import { Accordion, AccordionItem } from 'react-light-accordion';
import 'react-light-accordion/demo/css/index.css';

const App = () => (
  <div>
    <h1>React Accordion</h1>
    <Accordion atomic={true}>

      <AccordionItem title="Title 1">
        <DummyContent />
      </AccordionItem>

      <AccordionItem title="Title 2">
        <DummyContent />
      </AccordionItem>

      <AccordionItem title="Title 3">
        <DummyContent />
      </AccordionItem>

    </Accordion>
  </div>
);

const DummyContent = () => (
  <p style={{ padding: '18px' }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
);

export default App;
React JSX

Properties

COMPONENTNAMETYPEDEFAULTDESCRIPTION
Accordion atomic bool false False means multiple accordion items can be active at the same time
AccordionItem title string TITLE Defines the title of accordion items

GitHub

 

Latest commit to the master branch on 8-14-2018
Download as zip

React.js Examples

Comments

No Comments have been Posted.

Post Comment

Please Login to Post a Comment.

Ratings

Rating is available to Members only.

Please login or register to vote.

No Ratings have been Posted.
Render time: 0.68 seconds
10,798,416 unique visits