{"id":15428939,"url":"https://github.com/timdaub/react-envelope-graph","last_synced_at":"2025-11-08T19:32:42.618Z","repository":{"id":36272426,"uuid":"222945234","full_name":"TimDaub/react-envelope-graph","owner":"TimDaub","description":"A drag-and-drop-enabled, responsive, envelope graph that allows to shape a wave with attack, decay, sustain and release","archived":false,"fork":false,"pushed_at":"2023-01-05T01:18:12.000Z","size":1100,"stargazers_count":10,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-27T06:32:48.150Z","etag":null,"topics":["adsr","react","react-component"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/nervous-northcutt-ikjhb?fontsize=14\u0026hidenavigation=1\u0026theme=dark","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimDaub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-20T13:35:34.000Z","updated_at":"2024-05-22T18:04:56.000Z","dependencies_parsed_at":"2023-01-17T00:01:04.717Z","dependency_job_id":null,"html_url":"https://github.com/TimDaub/react-envelope-graph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Freact-envelope-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Freact-envelope-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Freact-envelope-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimDaub%2Freact-envelope-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimDaub","download_url":"https://codeload.github.com/TimDaub/react-envelope-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232042472,"owners_count":18464351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adsr","react","react-component"],"created_at":"2024-10-01T18:08:06.308Z","updated_at":"2025-11-08T19:32:42.565Z","avatar_url":"https://github.com/TimDaub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-envelope-graph\n\n[![npm version](https://badge.fury.io/js/react-envelope-graph.svg)](https://badge.fury.io/js/react-envelope-graph)\n\n\u003e A drag-and-drop-enabled, responsive, envelope graph that allows to shape a\n\u003e wave with attack, decay, sustain and release.\n\n\u003ca href=\"https://github.com/TimDaub/react-envelope-graph\"\u003e\u003cimg width=\"600\"\nsrc=\"https://github.com/TimDaub/react-envelope-graph/raw/master/assets/react-envelope-graphv2.gif\" alt=\"react-envelope-graph screenshot\" /\u003e\u003c/a\u003e\n\nCheck out the [Demo](https://codesandbox.io/s/nervous-northcutt-ikjhb?fontsize=14\u0026hidenavigation=1\u0026theme=dark)!\n\n## Installing\n\n```bash\n$ npm i --save react-envelope-graph\n```\n\nor\n\n```bash\n$ yarn add react-envelope-graph\n```\n\n## Usage\n\nImport the component\n\n```js\nimport EnvelopeGraph from \"react-envelope-graph\";\n```\n\nand then use it:\n\n```js\nfunction App() {\n  return (\n    \u003cEnvelopeGraph\n      defaultXa={1}\n      defaultXd={0.5}\n      defaultYs={0.5}\n      defaultXr={0.7}\n      ratio={{\n        xa: 0.25,\n        xd: 0.25,\n        xr: 0.2\n      }}\n      style={{\n        backgroundColor: \"black\",\n        padding: \"2.5%\",\n        height: \"100vh\",\n        width: \"20vw\"\n      }}\n      styles={{\n        line: {\n          fill: \"none\",\n          stroke: \"red\",\n          strokeWidth: 2,\n        },\n        dndBox: {\n          fill: \"none\",\n          stroke: \"blue\",\n          strokeWidth: 0.1,\n          height: 1,\n          width: 1\n        },\n        dndBoxActive: {\n          fill: \"blue\",\n        }\n      }}\n      onChange={console.log}\n    /\u003e\n  );\n}\n```\n\n### Notes\n\n- The `height/width` ratio is preserved within the svg\n- `width` and `height` can be specified via the `style` prop\n- `defaultXa`, `defaultXd`, `defaultYs` and `defaultXr` need to have a value\n  between 0 and 1\n- In `ratio`, the sum of the values `xa`, `xd` and `xr` needs to remain below\n  `0.75`. `xs` is internally set to `xs === 0.25`.\n- Most numeric values in the `styles` prop must not use a unit (e.g. `px` or\n  `em`) as they set values on SVG components (user units)\n- Note that `styles` is not a regular `style` prop, but a custom prop that\n  additionally allows to configure interaction reactions too\n- To regularly style the component, use the `style` prop\n- When `defaultXa`, `defaultXd`, `defaultYs` and `defaultXr` props are changed,\n  no `onChange` event is fired and the graph is set to these values.\n- Optional props: `ratio`, `dndBox`, `onChange`, `style`\n\n\n## Contributing\n\nTo try the component:\n\n```bash\n$ git clone git@github.com:TimDaub/react-envelope-graph.git\n$ npm i\n$ npm run dev\n```\n\n## Current Limitations\n\nHelp is very much appreciated. I'll try to handle PRs as fast as I can. Below\nis a list of the current limitations:\n\n- [ ] The `ya` value cannot be set via dragging\n- [ ] [Touch listeners are not yet implemented](https://gist.github.com/hartzis/b34a4beeb5ceb4bf1ed8659e477c4191)\n\n## Changelog\n\n### 0.1.4\n\n- `defaultXa`, `defaultXd`, `defaultYs` and `defaultXr` can now be used to\n  continuously set the graphs values without an `onChange` event firing\n\n### 0.1.3\n\n- Bugfix: Dropped `getBoundingClientRect` in favor of `getComputedStyles` for\n  measuring the svg's dimensions. Setting `margin` and `padding` via `style`\n  should now be possible without problems.\n\n### 0.1.2\n\n- Bugfix: Properly fix ratio issues with `height` and `width`. They're now\n  members of the `style` prop\n\n### 0.1.1\n\n- Hotfix: Set `height`/`width` of graph to `100%` to respect ratio. I'll have\n  to go back on that fix later...\n\n### 0.1.0\n\n- Breaking change: Removed functions `onAttackChange`, `onDecayChange`,\n  `onSustainChange` and `onReleaseChange` in favor of `onChange`, which returns\n  all values as an object\n\n### 0.0.11\n\n- When setting the props `height` and `width`, the graph's ratio is adjusts\n  accordingly\n\n### 0.0.10\n\n- Bugfix: Remove `ratio.xs` from configurable params\n\n### 0.0.9\n\n- Bugfix: Dragging the function works even thought the graph has any type of\n  padding\n\n### 0.0.8\n\n- Bugfix: Yet fixing corner length another time...\n\n### 0.0.7\n\n- Bugfix: Left top corner same length as others\n\n### 0.0.6\n\n- Add cut corners to graph\n- Allow definition of `padding` through native `style` prop and remove\n  `marginTop`, `marginRight`, `marginBottom`, and `marginRight` props\n\n### 0.0.5\n\n- Improve support for `styles` prop to allow to styling of the component\n- Move `dndBox` prop to `styles`\n\n### 0.0.4\n\n- DnD box's size now configurable\n\n### 0.0.3\n\n- Bugfix: When mouse leaves graph, DnD stops\n\n### 0.0.2\n\n- Event subscriptions\n- Improved props API\n- Responsive\n\n### 0.0.1\n\n- Dragable ADSR graph\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimdaub%2Freact-envelope-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimdaub%2Freact-envelope-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimdaub%2Freact-envelope-graph/lists"}