Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

feat: add react refs docs #221

Merged
merged 8 commits into from
Aug 26, 2022
Merged

feat: add react refs docs #221

merged 8 commits into from
Aug 26, 2022

Conversation

lcschy
Copy link
Contributor

@lcschy lcschy commented Aug 24, 2022

Description

  • Adds docs for new refs feature for react elements

Testing required outside of automated testing?

  • Not Applicable

Screenshots (if appropriate):

image

image

image

  • Not Applicable

Rollback / Rollforward Procedure

  • Roll Forward
  • Roll Back

Reviewer Checklist

  • Description of Change
  • Description of outside testing if applicable.
  • Description of Roll Forward / Backward Procedure
  • Documentation updated for Change

@lcschy lcschy requested a review from a team as a code owner August 24, 2022 19:15
Copy link
Contributor

@djejaquino djejaquino left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Under BasisTheoryReact section let's add a new Element Ref (or similar) where we have code sample of how to perform tokenization, similar to the getElement section.
It feels weird that we would be deprecating the latter and not adding examples for Refs.
Be aware of the Typescript type generics passed to useRef function

source/includes/elements/react/_basis_theory_react.md Outdated Show resolved Hide resolved
source/includes/elements/react/_card_element.md Outdated Show resolved Hide resolved
source/includes/elements/react/_card_number_element.md Outdated Show resolved Hide resolved
source/includes/elements/react/_text_element.md Outdated Show resolved Hide resolved
@lcschy lcschy requested a review from djejaquino August 25, 2022 13:16
```

Gets the underlying Element instance. Given the declarative nature of React, this method enables referencing the Element value for tokenization.
[Refs](https://reactjs.org/docs/refs-and-the-dom.html) are a way to access DOM nodes or React elements created in the render method.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[Refs](https://reactjs.org/docs/refs-and-the-dom.html) are a way to access DOM nodes or React elements created in the render method.
[Refs](https://reactjs.org/docs/refs-and-the-dom.html) are a way to access DOM nodes or React component instances.


The targeted Element must be present in your component tree (virtual DOM) when invoking this method.
In the case of BasisTheoryReact, `refs` are utilized to store or receive (in the case of a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)) the created element instance.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In the case of BasisTheoryReact, `refs` are utilized to store or receive (in the case of a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)) the created element instance.
In BasisTheoryReact, `refs` are utilized to store or receive (in the case of a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)) the underlying Element instance to tokenize their value or call one of its methods.

</aside>

You can type-cast `getElement` method to safely call specific Elements methods.
When using typescript, you can type-cast the element `ref` to safely call specific Elements methods.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turn Tokenization > Data Parsing into a level 2 heading and link "specific" methods to it, for better clarity.

Suggested change
When using typescript, you can type-cast the element `ref` to safely call specific Elements methods.
When using Typescript, you can type-cast the element `ref` to safely call specific Elements methods.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we introduce focus and blur we will have to rethink about methods documentation.

@lcschy lcschy merged commit e256252 into master Aug 26, 2022
@lcschy lcschy deleted the eng-3201 branch August 26, 2022 18:39
bt-platform-eng pushed a commit that referenced this pull request Aug 26, 2022
# [1.62.0](v1.61.0...v1.62.0) (2022-08-26)

### Features

* add react refs docs ([#221](#221)) ([e256252](e256252))
@bt-platform-eng
Copy link

🎉 This PR is included in version 1.62.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants