strudel/packages/react

@strudel.cycles/react

This package contains react hooks and components for strudel. It is used internally by the Strudel REPL.

Install

npm i @strudel.cycles/react

Usage

Here is a minimal example of how to set up a MiniRepl:

import * as React from 'react';
import '@strudel.cycles/react/dist/style.css';
import { MiniRepl } from '@strudel.cycles/react';
import { evalScope, controls } from '@strudel.cycles/core';
import { samples, initAudioOnFirstClick } from '@strudel.cycles/webaudio';

async function prebake() {
  await samples(
    'https://strudel.tidalcycles.org/tidal-drum-machines.json',
    'github:ritchse/tidal-drum-machines/main/machines/'
  );
  await samples(
    'https://strudel.tidalcycles.org/EmuSP12.json',
    'https://strudel.tidalcycles.org/EmuSP12/'
  );
}

async function init() {
  await evalScope(
    controls,
    import('@strudel.cycles/core'),
    import('@strudel.cycles/mini'),
    import('@strudel.cycles/webaudio'),
    import('@strudel.cycles/tonal')
  );
  await prebake();
  initAudioOnFirstClick();
}

if (typeof window !== 'undefined') {
  init();
}

export default function App() {
  return <MiniRepl tune={`s("bd sd,hh*4")`} />;
}

• Open example on stackblitz
• Also check out the nano-repl for a more sophisticated example