score:0
based on adding a width and height suggested by leonardo, i added a class and this worked for me too. background, border etc are optional possibilities as per your need.
i had to add !important as it wasn't overriding the default settings otherwise.
.node-custom-handle {
width: 15px!important;
height: 15px!important;
background: whitesmoke!important;
border: 1px solid black!important;
border-radius: 4px!important;
}
<handle
type="target"
position="top"
id="t"
classname="node-custom-handle"
onconnect={(params) => console.log("handle onconnect", params)}
/>
score:1
i did that passing a custom node with its own handles:
const node_types = {
yourtype: customnode,
};
...
<reactflow
nodetypes={node_types}
...
/>
then, at the customnode
, i used the handle
component with custom height and width:
import { handle, position } from 'react-flow-renderer';
const customnode = (...) => {
...
return <box>
...
<handle
type="target"
position={position.left}
style={{ // make the handle invisible and increase the touch area
background: 'transparent',
zindex: 999,
border: 'none',
width: '20px',
height: '20px',
}}
/>
<circleicon
style={{}} // fix the position of the icon over here
/>
</box>;
}
i think its a bit hacky, but that's the way i found to accomplish it.
Source: stackoverflow.com
Related Query
- How to increase the edge drop zone using React Flow
- How to implement Drop down in React JS using Array for the below snippet of code
- How to get the value from drop down selection using react
- How to extract the clicked value in the drop down menu using React Material UI?
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- How to mock history.push with the new React Router Hooks using Jest
- How to make the whole Card component clickable in Material UI using React JS?
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- How can remove console.log in the production build of a React application created using create-react-app?
- how to check the actual DOM node using react enzyme
- How to fade the edge of a View in react native?
- How to pass the match when using render in Route component from react router (v4)
- CDN links for React packages and how to import it when using react using the scripts from CDN
- How to compress the files using gzip in react app
- React Native - How to load local image using the uri in Image Component?
- How do I store the state of radio groups in React using react-hook-form
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- How to get the changed state after an async action, using React functional hooks
- How to get the element with the testid using react testing library?
- how to pass props to the route when using react router <Link>
- How do you pass data when using the navigate function in react router v6
- How to import uikit js in react js without using the uikit component?
- How to make the API call and display it in React JS using React Table and Axios?
- How can I define the type for a <video> reference in React using Typescript?
- How to add floating action button on the right-bottom side of the screen using material ui in react
- Using React how do I toggle the visibility of a nested component from a container component?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- how to write inline js event handler code in the react component using "this"
- How does React Developer Tools determine that the webpage is using React?
- How to add page transitions to React without using the router?
More Query from same tag
- Having difficulty using a method on useEffect, missing dependency and useCallback error?
- Meteor Method throw $set empty error when it is not empty
- react material ui grow on left side
- React-Dropzone, accepted files MIME type error
- How to calculate the distance between differents lat long and display on map dynamically react native
- axios doesn't get post request in redux-form
- GAE app.yaml settings for Flask backend with React and Flask frontend together on single deployment
- Babel plugin doesn't run as expected - output is not always shown
- In ReactJS is component state tied to an instance of the component or is it tied to all instances of the component?
- How to test if google maps function runs on componentDidUpdate() with Jest + Enzyme?
- SPFx breakpoints and debugging from Visual Studio Code instead from Chrome
- How to edit the icons and properties of the edit and remove buttons on the editable Material-table?
- React component props typescript issue
- Howto add pagination with axios get request in Reactjs
- How to mocking react refs with jest/enzyme?
- Import styles bootstrap in Next Js project React SSR
- Uncaught undefined error when using React.lazy
- Config route in react-router-dom v6
- Login Error: Error: A case reducer on a non-draftable value must not return undefined
- action does not call reducer
- Can I use a "UseEffect" only with a certain value?
- Testing react app with jest and enzyme token problem
- Meteor method called from React components responce and error callbacks are always undefined?
- In material UI, how do I center a Button in the middle of my Grid item?
- react-spring Transition does not animate enter state
- how to submit form data as "create" api method in ReactJS?
- Certain PDFs display blank when displayed using Base64 String
- Notifications with Socket.io - how to emit to a specific user/recipient?
- Papaparse doesn't work for more than 1 MB for me, react
- Use React App (with NodeJS Backend) in own network