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 contentfull 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 farutmParams: 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.