React Notebook Page

A customizable responsive notebook page.

Installing as a package

npm i react-notebook-page

Customize it yourself

Codesandbox: https://codesandbox.io/s/react-notebook-page-demo-tjzgio

Usage

import Notepage from "react-notebook-page";

export default function App() {
  return (
    <div>
      <Notepage>Hello!</Notepage>
    </div>
  );
}

The notebook page needs props to be customized. You can learn more about props by reading the section on props.

Props

Name	Value	Description
children *	string	Content that passes through the children is shown in the notepad
notepadHeaderColor	string	Changes the notepad header's color by passing notepadHeaderColor. The default is #423830
notepadWidth	string	Changes the width of the notepad by passing notepadWidth. The default is 600px
pageHeight	string	Changes the height of the page by passing pageHeight. The default is 60vh
setContent *	function	By passing (e) => {setState(e);} to setContent, the content is set in the state.

^* It is possible to use either children or setContent while using this package. This is a limitation that will be fixed in a future version or you can contribute to it.

Contributing

Found a bug? Want to add a new feature? Please send a pull request or raise an issue.