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 Hide 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 Hide 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 Hide 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 Hide 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 Hide 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 Hide 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 Hide 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 Hide 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 Hide code cell source

%%html
<link rel="stylesheet" href="https://unpkg.com/mafs@0.16.0/core.css">

Show code cell source Hide 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>
)

}