Skip to content

Commit

Permalink
Update readme, make onExit and onResize optional
Browse files Browse the repository at this point in the history
  • Loading branch information
vandycknick committed Mar 1, 2019
1 parent 140c383 commit 2e7c827
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 3 deletions.
71 changes: 70 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,74 @@
# useWebGL
React hook utility
[React Hook](https://reactjs.org/docs/hooks-overview.html) to get access to a webgl context and manage canvas life cycle

## Installation

```sh
# Yarn
yarn add @nvd/use-webgl

# NPM
npm i --save @nvd/use-webgl
```

## Usage
> This utility depends on React Hooks which are available as of react version 16.8.0 and higher.
```tsx
import React from "react"
import { render } from "react-dom"
import {createStore} from "redux"
import { useWebGL } from "@nvd/use-webgl"

const App = () => {
const [canvas, resizeCanvas] = useWebGL({ width: 250, height: 250 })

return (
<div> { canvas } </div>
);
}

render(
<App />,
document.getElementById('root'),
)

```

## API

### useWebGL
> (options: UseWebGLOptions) =&#x3E; (JSX.Element | ((newWidth: number, newHeight: number) =&#x3E; void))[];
Create a canvas and provide access to a webgl context object.

```tsx

const App = () => {
const [ canvas, resizeCanvas] = useWebGL({
width: 100,
height: 100,
onInit,
onResize,
onExit
})

...
}
```

### UseWebGLOptions
Configuration object given to `useWebGL` function. Width and height are passed to the canvas to set up the initial size. onInit, onExit and onResize function are life cycle hooks that are used to do set up, cleanup or update your view for those events. Only width, height and onInit are required

```ts
declare type UseWebGLOptions = {
width: number;
height: number;
onInit: (GL: WebGLRenderingContext | null, canvas: HTMLCanvasElement) => void;
onExit?: () => void;
onResize?: (width: number, height: number) => void;
};
```

## License
MIT
4 changes: 2 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ type UseWebGLOptions = {
height: number,

onInit: (GL: WebGLRenderingContext | null, canvas: HTMLCanvasElement) => void
onExit: () => void
onResize: (width: number, height: number) => void
onExit?: () => void
onResize?: (width: number, height: number) => void
}

const useWebGL = (options: UseWebGLOptions) => {
Expand Down

0 comments on commit 2e7c827

Please sign in to comment.