For the pre-made axes, would it be better to remove the prefix since they're called wi

good catch <a class="user-mention notranslate" data-hovercard-type="user" data-hoverca

fix is here <a class="issue-link js-issue-link" data-error-text="Failed to load title"

Suggestion: Change `Axis.AxisBottom` to `Axis.Bottom` about visx HOT 5 CLOSED

airbnb commented on May 3, 2024

Suggestion: Change `Axis.AxisBottom` to `Axis.Bottom`

from visx.

Comments (5)

hshoff commented on May 3, 2024

Odds are good that most folks will use destructoring when they import the respective Axis they need like so:

import { AxisLeft, AxisBottom } from '@vx/axis';

// ...
<AxisLeft />
<AxisBottom />

In the gallery examples I'm using package namespaces to help folks identify where things are coming from (it's not necessary, just thought it'd be easier to read):

import Axis from '@vx/axis';
import Shape from '@vx/shape';

// ...
<Axis.AxisLeft />
<Axis.AxisRight />
<Shape.LinePath />

if you want smaller builds (building a library, concerned about js size) you can import the component directly:

import AxisLeft from '@vx/axis/axis/AxisLeft';
import AxisBottom from '@vx/axis/axis/AxisBottom';

// ...
<AxisLeft />
<AxisBottom />

from visx.

Flaque commented on May 3, 2024

Ahhhh, okay that makes a lot of sense. :D

from visx.

williaster commented on May 3, 2024

this is a slightly different topic/I can open another issue, but right now destructuring fails for me on import:

import { AxisLeft } from '@vx/axis';
import Axis from '@vx/axis';

// ...
<AxisLeft /> // throws
<Axis.AxisLeft /> // fine

I think this is because named imports are not the same as destructuring? for that to work should we export as variables in addition to the default object?

from visx.

hshoff commented on May 3, 2024

good catch @williaster, I'll get a fix out today for all packages.

fix summary:

// instead of
import Axis from '@vx/axis';
<Axis.AxisLeft />

// if you want to namespace the components
import * as Axis from '@vx/axis';
<Axis.AxisLeft />

// even better (don't import unused things)
import { AxisLeft } from '@vx/axis';
<AxisLeft />

// even better for smaller file size (lib authors)
import AxisLeft from '@vx/axis/axis/AxisLeft';
<AxisLeft />