twreporter / twreporter-react-components

react components to build twreporter main site and news projects

@twreporter/react-components

The package is still maintained but this repo is deprecated. The source code of @twreporter/react-components had been already moved to our new monorepo twreporter-npm-packages

INSTALL

Need Peer Dependencies:

yarn add react react-dom react-router

Install:

yarn add @twreporter/react-components

Usage

@twreporter/react-components pkg provides many react components we are using in our website. It contains

• index-component
• header
• footer
• pagination
• listing-page
• fullpage-slides
• cinemagraph
• confirmation

index-components

These components are used to render twreporter main site homepage.

Check source code to understand how to use it.

header

Our main site uses header component to render the header.

Check source code to understand how to use it well.

footer

Our main site uses footer component to render the footer.

pagination

Topic listing page uses pagination component to show the page list.

Check source code here.

listing-page

listing-page contains two different lists, one is topic list, another is post list.

Check topic list source code and post list source code to know how to use it.

fullpage-slides

This high-risk-youth-life-is-a-struggle multimedia work is using fullpage-slides to render.

Check out the source code

cinemagraph

In high-risk-youth-life-is-a-struggle multimedia work, you will see two images sliding from different direction to compose a single full image. That tech is using cinemagraph component.

Checkout the source code here.

confirmation-components

import { Confirmation } from '@twreporter/react-components'


const Page = (props) =>(
  <div>
    <Confirmation
      onCancel={this.onCancel}
      onConfirm={this.onConfirm}
      content={DIALOG_CONTENT}
      confirm={DIALOG_CONFIRM}
      cancel={DIALOG_CANCEL}
    />
  </div>
)

props:

• onCancel(func): User click on cancel button will trigger onCancel
• onConfirm(func): User click on cancel button will trigger onConfirm
• content(string): Information in dialog
• confirm(string): confirm button text
• cancel(string): cancel button text

Developement

Dev

npm run dev will build the package into the customer folder, and start watching the .js files change.

If any .js file has been changed, gulp will babel changed files into the customer folder automatically.

cd twreporter-react-components
npm run dev

Build (pre-publish)

cd twreporter-react-components
npm run build

Pubish

cd twreporter-react-components
npm publish