List of Native Components Anatomy of a DapDap Component: List of Native Components
A list of all the built-in components to be used on DapDap Components.
Widget
The predefined component Widget
allows you to include an existing component into your code, thus enabling to create complex applications by composing components.
Copy const props = { name : "Anna" , amount : 3 };
return < Widget src = "influencer.testnet/widget/Greeter" props ={props} />;
IpfsImageUpload
A built-in component that enables users to directly upload an image to the InterPlanetary File System (IPFS).
Copy State .init ({image : {}})
return <>
< p > Raw State: { JSON .stringify ( state .image)} </ p >
< IpfsImageUpload image = { state .image} />
</>
Files
A built-in component that enables to input files with drag and drop support. Read more about the Files
component here .
Copy const [ img , setImg ] = useState ( null );
const [ msg , setMsg ] = useState ( 'Upload an Image' )
const uploadFile = (files) => {
setMsg ( 'Uploading...' )
const file = fetch (
"https://ipfs.near.social/add" ,
{
method : "POST" ,
headers : { Accept : "application/json" } ,
body : files[ 0 ]
}
)
setImg ( file . body .cid)
setMsg ( 'Upload an Image' )
}
return <>
< Files
multiple = { false }
accepts = {[ "image/*" ]}
clickable
className = "btn btn-outline-primary"
onChange = {uploadFile}
>
{msg}
</ Files >
{img ? < div >< img src = { `https://ipfs.near.social/ipfs/ ${ img } ` } /></ div > : '' }
</>;
Markdown
A component that enables to render Markdown.
Copy const markdown = ( `
## A title
This is some example **markdown** content, with _styled_ text
` )
return < Markdown text = {markdown} />;
:::tip Markdown Editor
Checkout this Markdown Editor , and its source code . :::
OverlayTrigger
Used to display a message or icon when the mouse is over a DOM element.
Copy const [ show , setShow ] = useState ( false );
const overlay = (
< div className = 'border m-3 p-3' >
This is the overlay Message
</ div >
);
return (
< OverlayTrigger
show = {show}
delay = {{ show : 250 , hide : 300 }}
placement = 'auto'
overlay = {overlay}
>
< button
className = "btn btn-outline-primary"
onMouseEnter = {() => setShow ( true )}
onMouseLeave = {() => setShow ( false )}
>
Place Mouse Over Me
</ button >
</ OverlayTrigger >
);
Component propsThe OverlayTrigger component has several props that allow you to customize its behavior:
InfiniteScroll
Infinitely load a grid or list of items. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.
Read more about the react-infinite-scroller package.
Copy const allNumbers = Array .from ( Array ( 100 ) .keys ())
const [ lastNumber , setLastNumber ] = useState ( 0 );
const [ display , setDisplay ] = useState ([]);
const loadNumbers = (page) => {
const toDisplay = allNumbers
.slice ( 0 , lastNumber + page * 10 )
.map (n => < p >{n}</ p >)
console .log (lastNumber + page * 10 )
setDisplay (toDisplay);
setLastNumber (lastNumber + page * 10 );
};
return (
< InfiniteScroll
loadMore = {loadNumbers}
hasMore = {lastNumber < allNumbers . length }
useWindow = { false }
>
{display}
</ InfiniteScroll >
);
TypeAhead
Provides a type-ahead input field for selecting an option from a list of choices. More information about the component can be found here .
Copy const [ selected , setSelected ] = useState ([]);
const options = [ "Apple" , "Banana" , "Cherry" , "Durian" , "Elderberry" ];
return <>
< Typeahead
options = {options}
multiple
onChange = {v => setSelected (v)}
placeholder = 'Choose a fruit...'
/>
< hr />
< p > Selected: { selected .join ( ', ' )} </ p >
</>;
Styled Components
Styled Components is a popular library for styling React components using CSS-in-JS.
Copy const Button = styled . button `
/* Adapt the colors based on primary prop */
background: ${ (props) => ( props .primary ? "palevioletred" : "white" ) } ;
color: ${ (props) => ( props .primary ? "white" : "palevioletred" ) } ;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 10px;
` ;
return (
< div >
< Button >Normal</ Button >
< Button primary >Primary</ Button >
</ div >
);
Tooltip
Displays a message once the mouse hovers over a particular item. This component was imported from React-Bootstrap
.
Copy const tooltip = (
< Tooltip id = "tooltip" >
< strong >Holy guacamole!</ strong > Check this info.
</ Tooltip >
);
return <>
< OverlayTrigger placement = "left" overlay = {tooltip}>
< button >Holy guacamole!</ button >
</ OverlayTrigger >
< OverlayTrigger placement = "top" overlay = {tooltip}>
< button >Holy guacamole!</ button >
</ OverlayTrigger >
< OverlayTrigger placement = "bottom" overlay = {tooltip}>
< button >Holy guacamole!</ button >
</ OverlayTrigger >
< OverlayTrigger placement = "right" overlay = {tooltip}>
< button >Holy guacamole!</ button >
</ OverlayTrigger >
</>
Last updated 5 months ago