React Metrc Link
A React button and modal designed to take in Metrc User Key and State and output those credentials if they are accurate.
Pairs with a python package metrc-client-python for the backend.
Getting Started
Install package in React app using
npm i react-metrc-link
In desired component, import the Metrc component
import {MetrcLink} from 'react-metrc-link'
Then add the component to the render method with the required props
<MetrcLink
callback={handleCallback}
states={states}
backendUrl='http://127.0.0.1:5000/user_key'
companyName= 'Terrayn'
/>
Required Props
- Callback - function with 1 arguement - pass in a function that can recieve back a response object example:
const handleCallback = (resp) =>{
console.log(resp.state, resp.user_key)
}
where resp will be
{
user_key:'...',
state:'CO'
}
-
States - array of strings - The states that you have Metrc Vendor Keys for in the backend server. Use state initials in uppercase format.
-
Backend Url - string - The url to send the user_key and state object to in order to verify credentials
-
Company Name - string - The app name or company name you want the modal copy to refer to
Non Required Props
-
Privacy Policy Link - string - a link to an end user privacy policy. Will add text to first screen that by continuing user agrees to linked privacy policy.
-
Label - string - Button text
-
Background Color - string - Button background color
-
Color - string - Button text color
-
Font Family - string - Button Font (only takes websafe fonts)
-
Font Weight - number - Button font weight
-
Border - string - Button border
-
Border Radius - string - Button border radius
-
Line Height - number - Button text line height
-
Letter Spacing - string - Button text letter spacing
-
Font Size - string - Button font size
-
Padding - string - Button padding
-
Margin - string - Button margin
Example Component with all available props
import React from 'react';
import './App.css';
import {MetrcLink} from 'react-metrc-link'
function App() {
const handleCallback = (resp) =>{
console.log(resp.state, resp.user_key)
}
const states =['CO','OR','CA','AK']
return (
<div>
<MetrcLink
callback={handleCallback}
states={states}
backendUrl='http://127.0.0.1:5000/user_key'
companyName='Terrayn'
privacyPolicyLink='https://www.google.com'
label='Link with Metrc'
backgroundColor='#68c86b'
color='#fff'
fontFamily='Helvetica, sans-serif'
fontWeight='40'
border='none'
borderRadius='3em'
lineHeight='1'
letterSpacing='0.5px'
fontSize='16px'
padding='12px 74px'
margin='0px'
/>
</div>
);
}
export default App;
Response
If request is successful response will be a 200 with a body of
{
user_key:'...',
state:'CO'
}
where user_key and state are the values the user entered.
Otherwise the response will be a 500 and the modal will send the user to re-enter their credentials.
Attributions
Package created by partnership between Terrayn and Lendica
Designs by Anna Stapor
Illustrations by Undraw