Skip to content

React Component to Display betterplace.org-Project-Teaser

License

Notifications You must be signed in to change notification settings

betterplace/betterplace-react-components

Repository files navigation

npm Version Build Status peerDependencies Status devDependencies Status Dependency Status

betterplace-react-components

Development

For recommended vscode setup run yarn setup-vscode or npm run setup-vscode & then install workspace @recommended extensions. Note that src/javascript/apiV4.ts is autogenerated and needs to be manually copied over if relevant API parts change.

Installation

With yarn:

yarn add betterplace-react-components

With npm:

npm i betterplace-react-components

Usage

import { ProjectTeaser } from 'betterplace-react-components'

<ProjectTeaser project={betterplaceOrgApiV4Response}>
import { FacebookButton } from 'betterplace-react-components'

<FacebookButton shape='round' shareUrl='www.foo.bar' />

etc. - run yarn start to get a preview of all components.

Share buttons with utm_params

<FacebookButton
  shape='round'
  shareUrl='www.foo.bar'
  utmParams={{ utm_campaign: 'user_share', utm_medium: 'foo', utm_source: 'bar' }}
/>

Share Button Props

Required props Optional props
All shareUrl URL of the shared page (string)

shape
round Render a round sharing button without content(string)

square Render a square sharing button without content (string)

minimal Render a rectangle share button with icon and content

full Render a rounded share button with icon and content
boxShadow Add a bottom box shadow to the icon (boolean) - only for full and round shapes so far

utmParams: Representation of the utmParams to be attached to the shareUrl (object)

beforeOnClick: Add additional behaviour to the click action (function)

content: Button content to that needs to be set with minimal button option (string)

title: title attribute for the <button> element (string)

color: Color that overrides the default button color
FacebookButton - -
FacebookMessengerButton facebookAppId: Facebook App ID of your platform (string) -
TwitterButton - -
TelegramButton - teaser: Intro text for the sharing message (string)
WhatsappButton - teaser: Intro text for the sharing message (string)
EmailButton - subject: Subject of the email(string)

teaser: Intro text for the sharing message (string)
LinkButton - -
InstagramButton - -

Sharing with custom markup

You can also use the click action handler only in case you want to use custom styled buttons.

import { facebookShareAction } from 'betterplace-react-components'

const MyShareButton = () => {
  const handleClick = () => facebookShareAction({
    shareUrl: 'www.foo.bar',
    utmParams: { utm_campaign: 'user_share', utm_medium: 'foo', utm_source: 'bar' }
  })

  return <span onClick={handleClick}>i luv facebook</span>
}

Customization

There is no theming support yet. Some styles can be set via props, e.g.

<ProjectTeaser progressbarColor='#0000ff' />

Development

Install development / testing dependencies:

yarn

Run hot-reloading preview:

yarn start

Run tests:

yarn test

Release a new version:

yarn publish

License

betterplace-react-components is released under the Apache 2.0 license and Copyright 2018..2022 gut.org gAG.