React

Usage

To utilize React components in the Rails views, use the react_component view helper.

= react_component(component_class_name, props={}, html_options={})

Example

/ user => User(id: 9, first_name: "John", last_name: "Doe")
= react_component("Avatar", user: user)

import React from 'react';
import { Avatar } from 'n2-styles'

function myComponent(props) {
  // props.user = { id: 9, first_name: "John", last_name: "Doe" };
  return (
    <Avatar user={props.user} />
  );
}

React Bootstrap

We suggest using the react-bootstrap yarn package for functionality such as collapsable content, etc.

import React from 'react';
import { useState } from 'react';
import { Button } from 'n2-styles';
import { Collapse } from 'react-bootstrap';

function ToggleContent({...props}) {
  const [active, setActive] = useState(false);

  return (
    <Button onClick={() => setActive(!active)} style="flat">
      {active ? "Hide Content" : "Show Content"}
    </Button>
    <Collapse in={active}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ultrices
        lectus, non congue eros. Aliquam vestibulum, sem ac viverra pretium,
        odio ex pellentesque odio, eu suscipit nunc magna in mi. Aliquam erat
        volutpat. Proin vulputate ex dui, nec hendrerit augue consequat quis.
        Sed at porttitor est. Ut malesuada metus sem, nec malesuada sem
        varius eu. Cras non sollicitudin orci. Nulla facilisi.
      </p>
      <p>
        Integer commodo dui et mauris viverra, eget mattis nulla condimentum.
        Sed sit amet eros tellus. Quisque faucibus euismod elit, eu rhoncus augue
        euismod nec. Ut sit amet elit magna. Suspendisse sollicitudin nisi justo,
        id eleifend nisi pharetra nec. Suspendisse mollis augue ligula.
        Donec volutpat nulla vitae viverra imperdiet. Aenean sit amet quam magna.
        Quisque consequat mi id turpis lacinia varius. Duis pharetra diam
        nec viverra pellentesque. Nullam tincidunt ex elit.
      </p>
    </Collapse>
  );
}

export { ToggleContent };