Introducing Shoka

Introducing Shoka: A React.js Componeont

Shoka is a React.js Componeont can show your favourite Song's Lyric on the page.Shoka gets it name from the Japanese Word 唱歌(しょうか) in my favourite song.

Using Shoka

Installing Shoka

First,install these required npm packages:

• React.js (I recommand you to install it by vite).

The command to using vite to create a React Project:

npm create vite@latest #For more info go to https://vite.dev

Then,download Shoka from https://codeberg.org/oldhelps/shoka

Using the Shoka JSX Element

Use it like this:

//Maybe you need this: import React from 'react'
import Shoka from './shoka'
//Your codes...
<Shoka />
//...

The JSX Element has 2 attributes:

• color :CSS Color you want the text to be
• align: Choose the align type:left ,right or center
  color='white' and align='center' are the default values.

The shoka.json file

There should be a shoka.json file in the assets folder.

//There is a sentence on the shoka.jsx file.It can help you find where the shoka.json file is.
import {lyrics} from '../assets/json'
/**
  *Of course,You can change the file position by editing JSX code.
  *But in the vite project,if you put shoka.jsx in src/componeonts/ folder,you may use it.
  */

The shoka.json file is like this:

[
  "汽笛一声新橋を<br>はや我汽車は離れたり<br>愛宕の山に入りのこる<br>月を旅路の友として",
  "右は高輪泉岳寺<br>四十七士の墓どころ<br>雪は消えても消えのこる<br>名は千載の後までも",
  "窓より近く品川の<br>台場も見えて波白く<br>海のあなたにうすがすむ<br>山は上総か房州か",
  "梅に名をえし大森を<br>すぐれば早も川崎の<br>大師河原は程ちかし<br>急げや電気の道すぐに",
  "鶴見神奈川あとにして<br>ゆけば横浜ステーシヨン<br>湊を見れば百舟の<br>煙は空をこがすまで",
  "横須賀ゆきは乗替と<br>呼ばれておるる大船の<br>つぎは鎌倉鶴が岡<br>源氏の古跡や尋ね見ん",
  "八幡宮の石段に<br>立てる一木の大鴨脚樹<br>別当公曉のかくれしと<br>歴史にあるは此蔭よ",
  //...
  ]

The wrap must using <br> instead of \nor \r etc.
There is a big array and the words are the items.
One item corresponds one paragraph of words.
Now,enjoy Using shoka!

（The Japanese is generated by Shoka ）