Noteworthy Programming Masterpiece
Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

rex-accordion

1.2.1 • Public • Published

ReX React UI Components Library

ReX React UI Component: rex-accordion

This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:

Github
https://github.com/rakuten-rex

NPM
https://www.npmjs.com/org/rakuten-rex

How it was built

  1. Build tool: webpack 4
  2. Codebase: Fork of Bootstrap project + ReX custom styles
  3. Css engine: Sass
  4. JavaScript component: React

How to install

npm install rex-accordion@1.2.1 --save

What you can do

An accordion is a progressive disclosure pattern, used to show/hide detailed information about a topic.

In this component you can find different options for single use of accordion, groups and disabled.

Live examples

For a complete guide of properties for React and HTML classes please visit the Storybook site:

https://rakuten-rex.github.io/rex-accordion/

JavaScript modules

React component (JavaScript + CSS Styles)

For plug and play components integration.

Example:

import 'rex-core'; // ReX Core dependency
import Accordion from 'rex-accordion';
 
function MyComponent() {
  return (
    <Accordion label="Label" iconStyle="default">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </Accordion>
  );
}

CSS Styles only

For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.

Example:

import 'rex-core/css'; // ReX Core dependency
import 'rex-accordion/css';
 
function MyComponent() {
  return (
    <div class="accordion">
      <div class="accordion-item">
        <button type="button" aria-haspopup="true" aria-expanded="true" class="accordion-title isOpen">
          <div class="accordion-title-container">
            Label <span aria-hidden="true" class="rex-icon chevron-right"></span>
          </div>
        </button>
        <div class="accordion-body">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.
        </div>
      </div>
    </div>
  );
}

Static HTML

Add it from our CDN into your HTML template or HTML static page.

For development mode:

<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rex-accordion -->
<link href="https://r.r10s.jp/com/rex/rex-accordion/1.2.1/rex-accordion.development.css" rel="stylesheet">

For production mode:

<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rex-accordion -->
<link href="https://r.r10s.jp/com/rex/rex-accordion/1.2.1/rex-accordion.production.min.css" rel="stylesheet">

Example:

<div class="rex-css-style my-component">
  <div class="accordion">
    <div class="accordion-item">
      <button type="button" aria-haspopup="true" aria-expanded="true" class="accordion-title isOpen">
        <div class="accordion-title-container">
          Label <span aria-hidden="true" class="rex-icon chevron-right"></span>
        </div>
      </button>
      <div class="accordion-body">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.
      </div>
    </div>
  </div>
</div>

Javascript and React related documents

Take a look to this nice documentation pages to be more familiar with React and modern Javascript:

Official site

https://reactjs.org/docs/getting-started.html

Google Web Fundamentals (the whole site is a must to read)

https://developers.google.com/web/fundamentals/

Webpack as magic bundler

https://webpack.js.org/

Composing Software series (how to understand Funcional Programming)

https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea

Common React patterns

https://reactpatterns.com

Understanding Storybook with nice images

https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07

Some guidelines for clean code

https://americanexpress.io/clean-code-dirty-code/

Install

npm i rex-accordion

DownloadsWeekly Downloads

0

Version

1.2.1

License

MIT

Unpacked Size

387 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar