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.