react-syntax-highlighter/dist/esm/styles/hljs#docco JavaScript Examples
The following examples show how to use
react-syntax-highlighter/dist/esm/styles/hljs#docco.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Code.js From sofia-react-template with MIT License | 6 votes |
|
Code = ({ children }) => {
return (
<div className={s.codeContainer}>
<SyntaxHighlighter
className=""
language="javascript"
style={docco}
>
{children}
</SyntaxHighlighter>
</div>
);
}
Example #2
| Source File: Overrides.js From react-blog-github with MIT License | 5 votes |
|
CodeBlock = ({children}) => (
<SyntaxHighlighter language="javascript" style={docco}>
{children.props.children}
</SyntaxHighlighter>
)
Example #3
| Source File: App.js From tailblocks with MIT License | 4 votes |
|
render() {
const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} />
<aside className="sidebar" ref={this.sidebarRef}>
{this.listRenderer()}
</aside>
<div className="toolbar">
<button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
{this.state.codeView &&
<div className="clipboard-wrapper">
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
{clipboardIcon}
<span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
</div>
}
<button className="copy-the-block" onClick={this.toggleView}>
{!this.state.codeView ?
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M16 18L22 12 16 6"></path>
<path d="M8 6L2 12 8 18"></path>
</svg>
:
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="css-i6dzq1"
viewBox="0 0 24 24"
>
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
}
<span>{!this.state.codeView ? 'VIEW CODE': 'PREVIEW'}</span>
</button>
<div className="switcher">
{this.themeListRenderer()}
</div>
{this.viewModeRenderer()}
<button className="mode" onClick={this.changeMode}></button>
</div>
<div className="markup" ref={this.markupRef}>{getBlock({ theme, darkMode })[blockType][blockName]}</div>
<main className="main" style={{ opacity: this.state.ready ? '1' : '0' }}>
<div className={`view${this.state.codeView ? ' show-code' : ''}`}>
<Frame
contentDidMount={this.handleContentDidMount}
contentDidUpdate={this.handleContentDidUpdate}
head={
<>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
{
<style dangerouslySetInnerHTML={{__html:
`img { filter:
${darkMode ?
'invert(1) opacity(.5); mix-blend-mode: luminosity; }'
:
'sepia(1) hue-rotate(190deg) opacity(.46) grayscale(.7) }'
}`
}}
/>
}
</>
}
>
{getBlock({ theme, darkMode })[blockType][blockName]}
</Frame>
<div className="codes">
<SyntaxHighlighter language="html" style={darkMode ? vs2015 : docco} showLineNumbers>
{this.beautifyHTML(this.state.markup)}
</SyntaxHighlighter>
</div>
</div>
</main>
<a href="https://github.com/mertJF/tailblocks" className="github" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
/>
</svg>
GitHub
</a>
<div className="keyboard-nav">
<div className={`k-up keyboard-button${currentKeyCode === 38 ? ' is-active' : ''}`} data-info="Previous block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</div>
<div className="keyboard-nav-row">
<div className={`k-left keyboard-button${currentKeyCode === 37 ? ' is-active' : ''}`} data-info="Hide sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
</div>
<div className={`k-down keyboard-button${currentKeyCode === 40 ? ' is-active' : ''}`} data-info="Next block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
<div className={`k-right keyboard-button${currentKeyCode === 39 ? ' is-active' : ''}`} data-info="Show sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</div>
</div>
</div>
);
}
Example #4
| Source File: Notifications.js From react-code-splitting-2021-04-26 with MIT License | 4 votes |
|
export default function NotificationsPage(props) {
var classes = useStyles();
// local
var [notificationsPosition, setNotificationPosition] = useState(2);
var [errorToastId, setErrorToastId] = useState(null);
return (
<>
<PageTitle title="Notifications" />
<Grid container spacing={4}>
<ToastContainer
className={classes.toastsContainer}
closeButton={
<CloseButton className={classes.notificationCloseButton} />
}
closeOnClick={false}
progressClassName={classes.notificationProgress}
/>
<Grid item xs={12}>
<Widget disableWidgetMenu>
<Grid container item xs={12}>
<Grid item xs={4}>
<Widget title="Layout Options" noWidgetShadow disableWidgetMenu noBodyPadding noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
There are few position options available for notifications. You
can click any of them to change notifications position:
</Typography>
<div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(0)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 0,
})}
/>
<button
onClick={() => changeNotificationPosition(1)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 1,
})}
/>
<button
onClick={() => changeNotificationPosition(2)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 2,
})}
/>
</div>
<Typography className={classes.layoutText} size="md">
Click any position
</Typography>
<div className={classes.layoutButtonsRow}>
<button
onClick={() => changeNotificationPosition(3)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 3,
})}
/>
<button
onClick={() => changeNotificationPosition(4)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 4,
})}
/>
<button
onClick={() => changeNotificationPosition(5)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]: notificationsPosition === 5,
})}
/>
</div>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
Different types of notifications for lost of use cases. Custom
classes are also supported.
</Typography>
<div className={classes.buttonsContainer}>
<Button
variant="contained"
color="primary"
onClick={() => handleNotificationCall("info")}
className={classnames(classes.notificationCallButton)}
>
Info Message
</Button>
<Button
variant="contained"
color="secondary"
onClick={() => handleNotificationCall("error")}
className={classnames(classes.notificationCallButton)}
>
Error + Retry Message
</Button>
<Button
variant="contained"
color="success"
onClick={() => handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
<Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
// import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const Page = () => {
<div>
<ToastContainer />
<button onClick={() => toast('Toast Message')}>
show notification
</button>
</div>
};
`}</SyntaxHighlighter>
<Typography variant="caption">
For more API information refer to the library documentation
</Typography>
</div>
</Widget>
</Grid>
</Grid>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<Notification
className={classes.notificationItem}
shadowless
type="message"
message="Thanks for Checking out Messenger"
variant="contained"
color="secondary"
/>
<Notification
className={classes.notificationItem}
shadowless
type="feedback"
message="New user feedback received"
variant="contained"
color="primary"
/>
<Notification
className={classes.notificationItem}
shadowless
type="customer"
message="New customer is registered"
variant="contained"
color="success"
/>
<Notification
className={classes.notificationItem}
shadowless
type="shipped"
message="The order was shipped"
variant="contained"
color="warning"
/>
<Notification
className={classes.notificationItem}
shadowless
type="delivered"
message="The order was delivered"
variant="contained"
color="primary"
/>
<Notification
className={classes.notificationItem}
shadowless
type="defence"
message="5 Defence alerts"
variant="contained"
color="info"
/>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<Notification
className={classes.notificationItem}
type="report"
message="New report has been received"
color="secondary"
/>
<Notification
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
color="primary"
/>
<Notification
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
color="success"
/>
<Notification
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
color="warning"
/>
<Notification
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
color="primary"
/>
<Notification
className={classes.notificationItem}
type="disc"
message="The disc is full"
color="info"
/>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<Notification
className={classes.notificationItem}
type="report"
message="New report has been received"
variant="rounded"
color="secondary"
/>
<Notification
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
variant="rounded"
color="primary"
/>
<Notification
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
variant="rounded"
color="success"
/>
<Notification
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
variant="rounded"
color="warning"
/>
<Notification
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
variant="rounded"
color="primary"
/>
<Notification
className={classes.notificationItem}
type="disc"
message="The disc is full"
variant="rounded"
color="info"
/>
</Widget>
</Grid>
</Grid>
</>
);
// #############################################################
function sendNotification(componentProps, options) {
return toast(
<Notification
{...componentProps}
className={classes.notificationComponent}
/>,
options,
);
}
function retryErrorNotification() {
var componentProps = {
type: "message",
message: "Message was sent successfully!",
variant: "contained",
color: "success",
};
toast.update(errorToastId, {
render: <Notification {...componentProps} />,
type: "success",
});
setErrorToastId(null);
}
function handleNotificationCall(notificationType) {
var componentProps;
if (errorToastId && notificationType === "error") return;
switch (notificationType) {
case "info":
componentProps = {
type: "feedback",
message: "New user feedback received",
variant: "contained",
color: "primary",
};
break;
case "error":
componentProps = {
type: "message",
message: "Message was not sent!",
variant: "contained",
color: "secondary",
extraButton: "Resend",
extraButtonClick: retryErrorNotification,
};
break;
default:
componentProps = {
type: "shipped",
message: "The item was shipped",
variant: "contained",
color: "success",
};
}
var toastId = sendNotification(componentProps, {
type: notificationType,
position: positions[notificationsPosition],
progressClassName: classes.progress,
onClose: notificationType === "error" && (() => setErrorToastId(null)),
className: classes.notification,
});
if (notificationType === "error") setErrorToastId(toastId);
}
function changeNotificationPosition(positionId) {
setNotificationPosition(positionId);
}
}
Example #5
| Source File: NotificationsView.js From react-code-splitting-2021-04-26 with MIT License | 4 votes |
|
NotificationsPage = ({ classes, ...props}) => (
<React.Fragment>
<PageTitle title="Notifications" />
<Grid container spacing={32}>
<ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} />
<Grid item xs={12} md={6} lg={4}>
<Widget title="Layout Options" disableWidgetMenu>
<Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography>
<div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} />
<button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
<button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
</div>
<Typography className={classes.layoutText} size="md">Click any position</Typography>
<div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} />
<button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
<button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
</div>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notifications Types" disableWidgetMenu>
<Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography>
<div className={classes.buttonsContainer}>
<Button variant="contained" colortheme="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button>
<Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
<Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Usage" disableWidgetMenu>
<Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
// import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const Page = () => {
<div>
<ToastContainer />
<button onClick={() => toast('Toast Message')}>
show notification
</button>
</div>
};
`}</SyntaxHighlighter>
<Typography variant="caption">For more API information refer to the library documentation</Typography>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
</Widget>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" />
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
</Widget>
</Grid>
</Grid>
</React.Fragment>
)
