brightroom
v0.0.1 image image-editor canvas editor typescript
Brightroom
Embeddable image editor for the modern web (TypeScript).
Installation
NPM/Yarn
Brightroom can be installed by using either yarn or npm:
yarn add brightroom
// ...or
npm install brightroom
Then it can be included in a project using ES import statements:
// Important! Don't forget the CSS.
import 'brightroom/dist/brightroom.esm.css';
import Brightroom from 'brightroom';
Unpkg
<link
rel="stylesheet"
href="https://unpkg.com/brightroom/dist/brightroom.cjs.production.min.css"
/>
<script src="https://unpkg.com/brightroom/dist/brightroom.cjs.production.min.js"></script>
Hosting
The files necessary for self-hosting can be found in the dist directory. For non ESM projects, the CJS version (brightroom.cjs.production.min.js) will be the right one.
Usage
Brightroom needs to be mounted to a container element. It will detect and adapt itself to the parent element's height and width. Setting an explicit size on the container element is recommended.
import 'brightroom/dist/brightroom.esm.css';
import Brightroom from 'brightroom';
const brightroom = new Brightroom({
image: './example.jpg',
container: document.getElementById('root')!
});
// Setting initial options is not required, in fact Brightroom has an API.
brightroom.setImage('image.png');
brightroom.unmount();
brightroom.mount(document.getElementById('newContainer')!);