React components to create parallax scroll effects for banners, images or any other DOM elements. Uses a single scroll listener to add vertical or horizontal scrolling based offsets to elements based on their position in the viewport. Optimized to reduce jank on scroll and works with universal (server-side rendered) React apps.

The DevExtreme React Chart is a component that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more. It is a stateless component - it relies on properties and works in controlled mode only. The DevExtreme React Chart has a composable and extendable architecture in which plugins provide additional elements (such as axes, legend, grid). Twitter Bootstrap and Material-UI rendering and theming are supported out of the box.

nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.

A React.js component to display an interactive SVG map.

We help developers, and the companies they work for, stay up-to-date via our variety of publications, across the web, social and by email.

Dunno why I bookmark this shit, maybe because someday I could need it.

A composable charting library

DownloadButton is a simple component for letting the user download a javascript-generated file. It was extracted from Notablemind.

React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework.

react-developer-roadmap - Roadmap to becoming a React developer in 2018

Recharts - Re-designed charting library built with React and D3.

components based on reactjs http://ant.design

components based on reactjs http://ant.design

CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.

If you want to load it from a file, you may try to use React-inlinesvg - that's pretty simple and straight-forward.

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>

Think of it like you're just calling JavaScript functions. You can't put a for loop inside a function call:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

But you can make an array, and then pass that in:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can use basically the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.