react-grid-path
📈 A pathfinding grid for React.
See the live example.
Description
react-grid-path
is a grid to test pathfinding algorithms.
The goal of this lib is to provide a way of plotting a path within a grid and to define starting/target points and obstacles.
⚠️ It DOES NOT provide pathfinding algorithms.
Install
npm i -S react-grid-path
Usage
- Grid component
<Grid obstacles=thisstateobstacles start=thisstatestart end=thisstateend width=thisstatewidth height=thisstateheight path=thisstatepath onGridUpdate=thisonGridUpdate/>
- Example
; // Example { superprops; thisonSearch = thisonSearch; thisonGridUpdate = thisonGridUpdate; const width = 40; const height = 30; thisstate = path : obstacles : start : x : 0 y : Math end : x : width - 1 y : Math width height ; } { this; } { // Generate path // Update state.path when path found const path = ; this; } { return <Container> <Actions onSearch=thisonSearch /> /* react-grid-path Grid */ <Grid obstacles=thisstateobstacles start=thisstatestart end=thisstateend width=thisstatewidth height=thisstateheight path=thisstatepath onGridUpdate=thisonGridUpdate /> </Container> ; }
See the example for more details.
API
Grid
width
: grid widthheight
: grid heightstart
: starting point for pathfinding.x
: coordinate along the x-axisy
: coordinate along the y-axis
end
: target point for pathfinding.x
: coordinate along the x-axisy
: coordinate along the y-axis
obstacles
: obstacles to be avoided (array of points / array of { x, y })mobileSize
: size of the unit/mobile/robot/character/object that you are finding a path for (default value 1)path
: array of waypoints generated by a pathfinding algorithm (array of [x, y])onGridUpdate
: function called when the grid is updated (start/end point has been move, obstacle added/deleted)clearance
: a grid with clearance values to display in the cells (optional)disabled
: disable the grabbing feature. Usefull for read only path.
Credits
Inspired by the PathFinding.js demo website.