texttree / projector-mode-rcl Goto Github PK

projector-mode-rcl

Explore the docs and code playground »

Report Bug · Request Feature

The library allows you to view content in an additional window

Purpose

• Be able to show content in a separate window

Problem

• there are very few programs that can show special content in projector mode. Often they have ready-made modules

Scope

• the library helps to transfer content from one browser window to another.
• the library should not depend on what content is transferred

Background

• It's not easy to find a free app for a small church congregation to easily display Bible verses during a service. Especially if it is a translation into OL.

(back to top)

• React.js
• StorageEvent
• React Styleguidist

(back to top)

Add the library to your React app

• yarn

yarn add @texttree/projector-mode-rcl

• npm

npm install @texttree/projector-mode-rcl

(back to top)

Use the useProjector hook to pass data to the second screen. If you need to somehow manage the value, then use getData only to set the initial value. For example:

import React, { useState } from 'react';
import { useProjector } from '@texttree/projector-mode-rcl';

export default function Settings() {
  const { setData, getData } = useProjector();
  const [verse, setVerse] = useState(() => getData('verse'));
  const [reference, setReference] = useState(() => getData('reference'));
  return (
    <>
      <p>Set verse</p>
      <input
        onChange={(e) => {
          setVerse(e.target.value);
          setData('verse', e.target.value);
        }}
        value={verse}
      />
      <p>Set reference</p>
      <input
        onChange={(e) => {
          setReference(e.target.value);
          setData('reference', e.target.value);
        }}
        value={reference}
      />
    </>
  );
}

Create a component with a layout for the second screen. In the component, use any variables you set via the hook. They will all be available as props.

import React from 'react';

export default function Layout({ verse, reference }) {
  return (
    <>
      <p>{verse}</p>
      <p>
        <small>{reference}</small>
      </p>
    </>
  );
}

Create a separate page and add a Projector component there and pass Layout as a prop

import React from 'react';
import { Projector } from '@texttree/projector-mode-rcl';
import Layout from './Layout';

export default function ProjectorPage() {
  return <Projector Layout={Layout} />;
}

For more examples, please refer to the Styleguidist link

(back to top)

IN PROGRESS

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. Guidelines for external contributions.

You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

If you would like to fork the repo and create a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Project Link: https://github.com/texttree/projector-mode-rcl

(back to top)