Releases: bkrem/react-d3-tree
Releases · bkrem/react-d3-tree
v2.0.1
v2.0.0
What's new in v2
This list is intended as an overview of important breaking changes that were introduced with v2.0.0.
For a list of all changes compared to v1, please see the changelog.
General
- Bumped React peer dependency: new minimum is
react@16.x
, supportsreact@17.x
. - Removed
d3
as peer dependency: the specific D3 modules that are necessary forreact-d3-tree
to function (d3-hierarchy, d3-selection, d3-shape, d3-zoom) have instead been included as direct dependencies. This means:- Using
react-d3-tree
does no longer require any version ofd3
to be present as a peer dependency. - Mitigates an issue where multiple versions of D3 may conflict with each other (#125).
- Using
- Typescript-first: all internal components (except unit tests) have been refactored to Typescript.
- Transpiled code in the package is no longer minified by default (thankfully!). This means:
- More useful stack traces.
- Easier debugging.
- Simpler demo integration: the demo/playground app now lives inside the repo's
demo
directory. The separatereact-d3-tree-demo
repo will be archived. - Removed reliance on
*.css
files:react-d3-tree
no longer uses any CSS files internally for styling.- Importing CSS files globally (i.e.
import "./styles.css"
) can cause resolution issues with some libraries/frameworks (e.g. Next.js).
- Importing CSS files globally (i.e.
- Renamed internal CSS classNames for clarity and consistency.
- If you were relying on
react-d3-tree
's internal classNames, please ensure you update references in your own CSS (e.g..linkBase -> .rd3t-link
). - The full list of internally used CSS classNames can be found here.
- If you were relying on
API
- Removed
treeUtils
export.treeUtils
has been removed to avoid redundant complexity, abstraction and bloat in the library's package.- If needed for your use case, the functionality
treeUtils
provided can be achieved by leveraging some additional D3 modules, such as d3.csvParse + d3.stratify.
- Moved animations behind
enableLegacyTransitions
prop. Animations are now disabled by default.- This has been done due to
react-d3-tree
still requiringreact-transition-group@1
internally. - I spent a lot of time trying to get newer major versions of
react-transition-group
(and a couple of other libraries) to play nice with D3's imperative approach - without success - at which point I decided to move ahead with other pressing issues for v2. - It is recommended to avoid the
enableLegacyTransitions
flag if possible, as animations can be slow in large trees and you may see compatibility warnings in your console due toreact-transition-group@1
relying on React lifecycle methods that will be deprecated in React 18.x.
- This has been done due to
- Tweaked node event handler naming to be clearer and more consistent (e.g.
onClick → onNodeClick
). - Removed deprecated
circleRadius
prop. - Removed
textLayout
prop.- Responsive text layouts can now be achieved via the new
renderCustomNodeElement
prop. - As a starting point, feel free to check out the demo's
PureSvgNodeElement
example
- Responsive text layouts can now be achieved via the new
- Removed
styles
prop. Styling nodes & links is now best handled via:- the new
className
props:svgClassName
pathClassFunc
rootNodeClassName
branchNodeClassName
leafNodeClassName
- the new
renderCustomNodeElement
prop.
- the new
- Removed
useCollapseData
prop.- Reason: one of the key focuses for v2 was to move away from mixing concerns (raw input data and styling/tree state) inside
data
.
- Reason: one of the key focuses for v2 was to move away from mixing concerns (raw input data and styling/tree state) inside
- Consolidated the
RawNodeDatum
interface (i.e. the expected shape of nodes indata
):- Merged distinct
data._children
anddata.children
into single
data.children
key. - Created
data.__rd3t
key to separate rd3t-specific data points from user input data:data._collapsed
->data.__rd3t.collapsed
data._depth
->data.__rd3t.depth
data.id
->data.__rd3t.id
- Merged distinct
v1.17.1
v1.17.0
v1.16.1
v1.16.0
v1.15.3: Hotfix/241 better react 15 compat (#242)
- Fixes unaddressed case for missing re-render when
props.data
andprops.translate
update simultaneously (#242, thank you @bhgsbatista)