List of Native Components

Anatomy of a DapDap Component: List of Native Components

A list of all the built-in components to be used on DapDap Components.

---

Widget

The predefined component Widget allows you to include an existing component into your code, thus enabling to create complex applications by composing components.

const props = { name: "Anna", amount: 3 };

return <Widget src="influencer.testnet/widget/Greeter" props={props} />;

---

IpfsImageUpload

A built-in component that enables users to directly upload an image to the InterPlanetary File System (IPFS).

State.init({image: {}})

return <>
  <p> Raw State: {JSON.stringify(state.image)} </p>
  <IpfsImageUpload image={state.image} />
</>

---

Files

A built-in component that enables to input files with drag and drop support. Read more about the Files component here.

const [img, setImg] = useState(null);
const [msg, setMsg] = useState('Upload an Image')

const uploadFile = (files) => {
  setMsg('Uploading...')

  const file = fetch(
    "https://ipfs.near.social/add",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body: files[0]
    }
  )

  setImg(file.body.cid)
  setMsg('Upload an Image')
}

return <>
  <Files
    multiple={false}
    accepts={["image/*"]}
    clickable
    className="btn btn-outline-primary"
    onChange={uploadFile}
  >
    {msg}
  </Files>
  {img ? <div><img src={`https://ipfs.near.social/ipfs/${img}`} /></div> : ''}
</>;

---

Markdown

A component that enables to render Markdown.

const markdown = (`
## A title

This is some example **markdown** content, with _styled_ text
`)

return <Markdown text={markdown} />;

:::tip Markdown Editor

Checkout this Markdown Editor, and its source code. :::

---

OverlayTrigger

Used to display a message or icon when the mouse is over a DOM element.

const [show, setShow] = useState(false);

const overlay = (
  <div className='border m-3 p-3'>
    This is the overlay Message
  </div>
);

return (
  <OverlayTrigger
    show={show}
    delay={{ show: 250, hide: 300 }}
    placement='auto'
    overlay={overlay}
  >
    <button
      className="btn btn-outline-primary"
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      Place Mouse Over Me
    </button>
  </OverlayTrigger>
);

Component props

The OverlayTrigger component has several props that allow you to customize its behavior:

---

InfiniteScroll

Infinitely load a grid or list of items. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.

Read more about the react-infinite-scroller package.

const allNumbers = Array.from(Array(100).keys())
const [lastNumber, setLastNumber] = useState(0);
const [display, setDisplay] = useState([]);

const loadNumbers = (page) => {
  const toDisplay = allNumbers
    .slice(0, lastNumber + page*10)
    .map(n => <p>{n}</p>)

  console.log(lastNumber + page*10)
  setDisplay(toDisplay);
  setLastNumber(lastNumber + page*10);
};

return (
  <InfiniteScroll
    loadMore={loadNumbers}
    hasMore={lastNumber < allNumbers.length}
    useWindow={false}
  >
    {display}
  </InfiniteScroll>
);

---

TypeAhead

Provides a type-ahead input field for selecting an option from a list of choices. More information about the component can be found here.

const [selected, setSelected] = useState([]);
const options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

return <>
  <Typeahead
    options={options}
    multiple
    onChange={v => setSelected(v)}
    placeholder='Choose a fruit...'
  />
  <hr />
  <p> Selected: {selected.join(', ')} </p>
</>;

---

Styled Components

Styled Components is a popular library for styling React components using CSS-in-JS.

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 10px;
`;

return (
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

---

Tooltip

Displays a message once the mouse hovers over a particular item. This component was imported from React-Bootstrap.

const tooltip = (
  <Tooltip id="tooltip">
    <strong>Holy guacamole!</strong> Check this info.
  </Tooltip>
);

return <>
  <OverlayTrigger placement="left" overlay={tooltip}>
    <button>Holy guacamole!</button>
  </OverlayTrigger>

  <OverlayTrigger placement="top" overlay={tooltip}>
    <button>Holy guacamole!</button>
  </OverlayTrigger>

  <OverlayTrigger placement="bottom" overlay={tooltip}>
    <button>Holy guacamole!</button>
  </OverlayTrigger>

  <OverlayTrigger placement="right" overlay={tooltip}>
    <button>Holy guacamole!</button>
  </OverlayTrigger>
</>