open-index/open-npm huggingface dataset:
npm package: @seracio/recycle
Description: A set of React components to make charts rapidly
Latest version: 0.2.5

# recycle

A set of React components to make charts rapidly

## Usage

```jsx
import { xy } from '@seracio/recycle';

render(
    <xy.Chart data={data} x={_.get('x')} y={_.get('y')}>
        <xy.Dot size={d => 2 + Math.random() * 20} />
        <xy.Axis />
    </xy.Chart>,
    document.querySelector('#root')
);
```

## Resources

-   [React / typescript cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet)
-   [defaultProps support with typescript@3.x](https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/#default-props-support)
-   [when to use context](https://reactjs.org/docs/context.html#when-to-use-context)

## Similar projets

-   [victory](https://github.com/FormidableLabs/victory)
-   [Uber's react-vis](https://github.com/uber/react-vis)
-   [vx](https://github.com/hshoff/vx)
-   [Semiotic](https://emeeks.github.io/semiotic/#/)
npm package: @seracio/tooltip
Description: A React hook to make tooltips
Author: nicolas mondon
Latest version: 4.0.2

## useTooltip

> useTooltip is a React hook to easily create tooltip in your React components.

## Install

@seracio/tooltip has 2 peer dependencies that need to be installed first

```Shell
npm i react d3-selection
npm i @seracio/tooltip
```

## Usage

You need to be aware of several things:

- The hook returns 2 things: the component Tooltip itself and a ref to the container
- The container that will get the ref needs to be in relative position or it won't work
- The hook will make tooltips on each element with a `data-tooltip` attribute
- In this attribute, you can specify html or simple text (no jsx though)

```jsx
import { useState } from "react";
import { useTooltip, useTooltipArea } from "@seracio/tooltip";

const MyComponent = () => {
  const [targetIndex, set] = useState(-1);
  const [Tooltip, root] = useTooltip({
    enterCb: (el) => set(+el.getAttribute("data-tooltip-index")),
    leaveCb: (el) => set(-1),
  });

  const size = 500;
  const data = [
    {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
    },
    {
      x: 300,
      y: 200,
      width: 50,
      height: 80,
    },
  ];

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        maxWidth: "600px",
        margin: "auto",
      }}
      ref={root}
    >
      <Tooltip />
      <svg preserveAspectRatio="xMidYMid meet" viewBox={`0 0 ${size} ${size}`}>
        {data.map((d, i) => {
          return (
            <rect
              style={{ cursor: "pointer" }}
              key={i}
              data-tooltip={`rect number ${i + 1}`}
              data-tooltip-index={i}
              {...d}
              fill={targetIndex === i ? "red" : "blue"}
            />
          );
        })}
      </svg>
    </div>
  );
};

<MyComponent />;
```

## API

// TODO
npm package: @seracio/types
Description: > Flow types for our projects
Author: nmondon
Latest version: 1.1.0

# types

> Flow types for our projects

## Development

*   publish a new version

```bash
npm version (major|minor|patch)
git push
git push --tags
npm publish
```

## Usage

```bash
npm i @seracio/types
```

```javascript
// @flow
import type { Player } from '@seracio/types/dist/tennis';

// ...
```