React Origin UI

react-accessible-accordion.js

import {
  Accordion,
  AccordionItem,
  AccordionItemTitle,
  AccordionItemBody
} from 'react-accessible-accordion'

Default
// ==============================
<AccordionControl>
  <Accordion
    accordion={true} // Enable accordion mode
    onChange={(itemUuid) => {
      console.log(itemUuid)
    }}
  >
    <AccordionItem uuid='accordion-item-1'>
      <AccordionItemTitle>Accordion_1</AccordionItemTitle>
      <AccordionItemBody>Accordion_Content_1</AccordionItemBody>
    </AccordionItem>
    <AccordionItem uuid='accordion-item-2'>
      <AccordionItemTitle>Accordion_2</AccordionItemTitle>
      <AccordionItemBody>Accordion_Content_2</AccordionItemBody>
    </AccordionItem>
  </Accordion>
</AccordionControl>

Dropdown
// ==============================
<AccordionControl dropdown>
  <Accordion>
    <AccordionItem>
      <AccordionItemTitle>Menu</AccordionItemTitle>
      <AccordionItemBody>
        <ul>
          <li>Menu_1</li>
          <li>Menu_2</li>
          <li>Menu_3</li>
        </ul>
      </AccordionItemBody>
    </AccordionItem>
  </Accordion>
</AccordionControl>

react-js-pagination.js

// State
constructor() {
  super();
  this.state = {
    activePage: 3
  }
}

// Function
pagination = {
  onPaginationChange: (pageNumber) => {
    this.setState({
      activePage: pageNumber
    })
  }
}

// Render
const {
  activePage
} = this.state

<PaginationControl
  activePage={activePage}
  itemsCountPerPage={10}
  totalItemsCount={100}
  pageRangeDisplayed={5}
  onChange={this.pagination.onPaginationChange}
/>

react-quill.js

<div className='ql-editor'>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p><br /></p>
  <p>Normal</p>
  <p>
    <strong>Bold</strong>
    <em>Italic</em>
    <u>Underline</u>
    <s>Line through</s>
  </p>
  <blockquote>Quote</blockquote>
  <p>Text<sub>sub</sub> Text<sup>sup</sup></p>
  <p><span style={{ color: 'rgb(255, 0, 0)' }}>Text color</span></p>
  <p><span style={{ backgroundColor: 'rgb(0, 255, 0' }}>Text highlight</span></p>
  <p>Text align: Left</p>
  <p className='ql-align-center'>Text align: Center</p>
  <p className='ql-align-right'>Text align: Right</p>
  <p className='ql-align-justify'>Text align: Justify</p>
  <ol>
    <li>Order list</li>
    <li>Order list</li>
    <li>Order list</li>
  </ol>
  <ul>
    <li>Bullet list</li>
    <li>Bullet list</li>
    <li>Bullet list</li>
  </ul>
  <p className='ql-indent-1'>Indent 1</p>
  <p className='ql-indent-2'>Indent 2</p>
  <p className='ql-indent-3'>Indent 3</p>
  <p className='ql-indent-4'>Indent 4</p>
  <p className='ql-indent-5'>Indent 5</p>
  <p className='ql-indent-6'>Indent 6</p>
  <p><a href='https://github.com/zenoamaro/react-quill' target='_blank'>Link</a></p>
  <p><img src='http://159.65.14.93:8929/uploads/-/system/user/avatar/58/avatar.png' /></p>
  <iframe class='ql-video' frameborder='0' allowfullscreen='true' src='https://www.youtube.com/embed/XFHcfkjsKB0?showinfo=0'></iframe>
</div>

react-toastify.js

Default
// ==============================
toast(
  // Template
  (({ closeToast }) =>
    <Notification
      message='Default notification!!!'
    />
  ),
  // Options
  {
    // react-toastify options:
    // https://fkhadra.github.io/react-toastify/
    // autoClose: false
  }
)

// Success 
// ==============================
toast(
  // Template
  (({ closeToast }) =>
    <Notification
      status='success'
      message='Success notification!!!'
    />
  ),
  // Options
  {
    // react-toastify options:
    // https://fkhadra.github.io/react-toastify/
    // autoClose: false
  }
)

// Error
// ==============================
toast(
  // Template
  (({ closeToast }) =>
    <Notification
      status='error'
      message='Error notification!!!'
    />
  ),
  // Options
  {
    // react-toastify options:
    // https://fkhadra.github.io/react-toastify/
    // autoClose: false
  }
)