Ipyreact Gallery#
Welcome! This Gallery will give you an overview and inspiration of possible ipyreact widgets.
QR Code Widget#
import ipyreact
from traitlets import Unicode
class QRCodeWidget(ipyreact.ReactWidget):
content = Unicode("").tag(sync=True)
_esm = """
import React from "react";
import QRCode from "react-qr-code";
export default function App({ content }) {
return <QRCode value={content} />
}
"""
q = QRCodeWidget(content="Hello World")
q
Diff Viewer#
Show code cell source
import ipyreact
from traitlets import Bool,Unicode, signature_has_traits
@signature_has_traits
class DiffViewerWidget(ipyreact.ReactWidget):
code_a = Unicode('Hello World').tag(sync=True)
code_b = Unicode('Hello New World').tag(sync=True)
split_view = Bool(True).tag(sync=True)
_esm = """
import React from 'react';
import ReactDiffViewer from 'react-diff-viewer';
export default function App({ code_a, code_b, split_view }) {
return (
<div
style={{
position: "relative",
width: "500px",
}}
>
<ReactDiffViewer oldValue={code_a} newValue={code_b} splitView={split_view} />
</div>
);
}
"""
DiffViewerWidget(
code_a='Cats purr gently',
code_b='Cats meow softly'
)
Activity Calendar#
Show code cell source
import ipyreact
from traitlets import Dict, List, Bool
class ActivityCalendarWidget(ipyreact.ReactWidget):
sample_data = List().tag(sync=True)
color_customization = Dict().tag(sync=True)
show_month = Bool(True).tag(sync=True)
_esm = """
import React from 'react'
import { ActivityCalendar } from 'activity-calendar-react'
const colorCustomization = {
activity0: '#dadada',
activity1: '#0e4429',
activity2: '#006d32',
activity3: '#26a641',
activity4: '#39d353',
}
export default function App({ sample_data, color_customization, show_month }) {
return (
<div className="App">
<ActivityCalendar sampleData = {sample_data} colorCustomization = {colorCustomization} showMonth={show_month}/>
</div>
);
}
"""
ActivityCalendarWidget(sample_data=[{"day": "2023-01-01", "activity": 4},
{"day": "2023-02-01", "activity": 3},
{"day": "2023-03-01", "activity": 2},
{"day": "2023-01-02", "activity": 1}],
show_month=True)
Material UI#
# this lines loads the %%react cell magic
%load_ext ipyreact
Show code cell source
%%react
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function BasicButtons() {
return (
<Stack spacing={2} direction="row">
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</Stack>
);
}
WorldDaylightMap#
Show code cell source
%%react
// from https://www.npmjs.com/package/world-daylight-map
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { WorldDaylightMap } from 'world-daylight-map';
export default function App() {
return (
<div style={{ width: '100%', height: '400px' }}>
<WorldDaylightMap />
</div>
);
};
Timer#
Show code cell source
%%react
import React from 'react';
import { useTimer } from 'use-timer';
export default function App() {
const { time, start, pause, reset, status } = useTimer();
return (
<>
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={reset}>Reset</button>
</div>
<p>Elapsed time: {time}</p>
{status === 'RUNNING' && <p>Running...</p>}
</>
);
};
Tldraw whiteboard#
Show code cell source
%%react
import * as React from "react";
import { Tldraw } from "@tldraw/tldraw";
export default function App() {
return (
<div
style={{
position: "relative",
width: "600px",
height: "250px",
}}
>
<Tldraw />
</div>
);
}
Code Highlighter#
Show code cell source
%%react
import React from "react";
import { Highlighter } from "rc-highlight";
const App = (props) => {
return (
<div
style={{
position: "relative",
width: "500px",
}}
>
<Highlighter
//code={makeCode}
//style={{ margin: "2px" }}
>
{makeCode}
</Highlighter>
</div>
);
};
export default App;
const makeCode = `
print("hello world")
for i in range(0, 10):
print(i)
`;
Guitar Chord Diagram#
Show code cell source
%%react
import React from 'react';
import GuitarChord from 'react-guitar-chords';
const App = () => {
return (
<GuitarChord
chordName='C major'
frets={['x', 3, 2, 0, 1, 0]}
/>
);
}
export default App;
Mafs#
Show code cell source
%%html
<link rel="stylesheet" href="https://unpkg.com/mafs@0.16.0/core.css">
Show code cell source
%%react
import * as React from 'react';
import {Mafs,Point, Circle, Plot,Theme, Coordinates, useMovablePoint, vec } from "mafs"
export default function HelloFx({my_count}) {
const sigmoid1 = (x: number) => my_count *0.1* 2 / (1 + Math.exp(-x)) - 1
return (
<Mafs>
<Coordinates.Cartesian />
<Plot.OfX y={Math.sin} color={Theme.blue} />
<Plot.OfY x={sigmoid1} color={Theme.pink} />
</Mafs>
)
}